Alternativa para innerHTML?

StackOverflow https://stackoverflow.com/questions/718091

  •  23-08-2019
  •  | 
  •  

Pergunta

Eu estou querendo saber se há uma maneira de mudar o texto de qualquer coisa em HTML sem usar innerHTML.

A razão que eu estou pedindo é porque ele é meio desaprovada pela W3C. Eu sei que é picuinhas, mas eu só quero saber, se existe uma maneira?

EDIT: as pessoas parecem não entender o que eu estou pedindo aqui:. Eu quero encontrar uma maneira de effectivly mudar o texto a ser apresentado

Se eu tiver: 

<div id="one">One</a>

innerHTML me permite fazer isso: 

var text = document.getElementsById("one");
text.innerHTML = "Two";

E o texto na minha tela terá mudado.
Eu não desejo acrescentar mais texto, desejo de mudar allready texto existente.

Foi útil?

Solução

A maneira recomendada é através da manipulação DOM, mas ele pode ser bastante detalhado. Por exemplo: 

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

Editar

Em resposta a sua edição, a fim de substituir o conteúdo atual, você simplesmente remover o conteúdo existente, em seguida, usar o código acima para preencher novos conteúdos. Por exemplo: 

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

Mas, como alguém disse, eu recomendo usar algo como jQuery em vez disso, como nem todos os navegadores suportam totalmente DOM, e aqueles que têm peculiaridades que são tratadas internamente por bibliotecas JavaScript. Por exemplo, jQuery é algo como isto: 

$('#someID').html("<p>Hello, <b>World</b>!</p>");

Outras dicas

A melhor maneira de fazer isso é usar document.createTextNode . Uma das principais razões para usar esta função em vez de innerHTML é que todos os caracteres HTML escapar será tomado cuidado para você enquanto você teria que escapar de sua cadeia de si mesmo se você estivesse simplesmente definindo innerHTML.

Você pode obter o mesmo efeito através da manipulação do DOM. A maneira mais segura para o texto da mudança é remover todos os nós do filho do elemento e substituí-los com um novo nó de texto. 

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

A remoção dos nós filhos se livrar do conteúdo de texto de seu elemento antes de o substituir com o novo texto.

A razão a maioria dos desenvolvedores evitar o uso de innerHTML é que o acesso a elementos através do DOM é compatível com as normas.

Se você só quer mudar texto simples, então não há uma solução mais rápida que se baseia em padrões: 

document.getElementById("one").firstChild.data = "two";

De qualquer forma, por favor note que innerHTML vai ser parte do próximo padrão HTML 5.

Simples.

Substituir text.innerHTML = 'two' com text.firstChild.nodeValue = 'two'. 

var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

Isso pode ser tão desagradável como innerHTML para você, mas tem a vantagem de trabalhar em alguns casos (IE), onde innerHTML ou appendChild não, como alguns nós de tabela, o texto de estilo e scripts elementos e o valor de forma campos

Você pode usar DOM da seguinte forma: 

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

Mas eu acho que ninguém raramente fazer isso, mas usar um quadro como jQuery ou Prototype ou qualquer outro framework javascript a há . Este é um exemplo jQuery: 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>

Parece-me que a combinação + HTML + JS CSS deve alcançar efeitos desejados: 

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

Alguém sabe se isso funciona na prática?

Bem i f i entendi sua pergunta corretamente esta deve ser uma resposta. 

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";

Também à procura de uma boa alternativa para element.innerHTML desvio Eu finalmente encontrei essa solução: 

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

Outra alternativa sem