Alternative per innerHTML?

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

  •  23-08-2019
  •  | 
  •  

Domanda

Mi chiedo se c'è un modo per cambiare il testo di qualsiasi cosa in formato HTML senza utilizzare innerHTML.

La ragione che sto chiedendo è perché è un po malvisto dal W3C. Lo so che è fare i difficili, ma voglio solo sapere, c'è un modo?

EDIT: la gente sembra fraintendere quello che sto chiedendo qui:. Voglio trovare un modo per cambiare effectivly il testo visualizzato

Se ho: 

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

innerHTML mi permette di fare questo: 

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

E il testo sul mio schermo sarà cambiato.
Non voglio per aggiungere altro testo, desidero cambiare giá testo esistente.

È stato utile?

Soluzione

Il metodo consigliato è attraverso la manipolazione del DOM, ma può essere molto prolisso. Ad esempio: 

// <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.

Modifica

In risposta alla tua modifica, al fine di sostituire il contenuto corrente, è sufficiente rimuovere il contenuto esistente, quindi utilizzare il codice di cui sopra per riempire di nuovi contenuti. Ad esempio: 

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

Ma, come qualcun altro ha detto, mi consiglia di utilizzare qualcosa come jQuery, invece, in quanto non tutti i browser supportano completamente DOM, e quelli che hanno stranezze che sono trattate internamente da librerie JavaScript. Ad esempio, jQuery simile a questa: 

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

Altri suggerimenti

Il modo migliore di farlo è quello di utilizzare document.createTextNode . Uno dei motivi principali per l'utilizzo di questa funzione invece di innerHTML è che tutto il carattere escape HTML sarà curato per voi, mentre si dovrà fuggire la stringa da soli se si stesse semplicemente impostando innerHTML.

È possibile ottenere lo stesso effetto manipolando il DOM. Il modo più sicuro per cambiare il testo è quello di rimuovere tutti i nodi figlio dell'elemento e sostituirli con un nuovo nodo di testo. 

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

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

La rimozione dei nodi figlio si libera del contenuto del testo del vostro elemento prima di sostituirla con il nuovo testo.

Il motivo più sviluppatori evitano utilizzando innerHTML è che l'accesso elementi attraverso il DOM è conforme agli standard.

Se si desidera modificare solo testo normale, poi c'è una soluzione più rapida che si basa su standard: 

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

In ogni caso, si ricorda che innerHTML sta per essere parte del prossimo HTML 5 standard.

Semplice.

Sostituire text.innerHTML = 'two' con 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;

Questo può essere il più consono nel innerHTML a te, ma ha il vantaggio di lavorare in alcuni casi (IE) in cui innerHTML o appendChild non lo fanno, come alcuni nodi della tabella, il testo di elementi di stile e script e il valore della forma campi

Si potrebbe usare DOM come segue: 

<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>

Ma credo che chiunque raramente fare questo, ma utilizzare un framework come jQuery o Prototype o qualsiasi altro framework javascript fuori c'è invece . Questo è l'esempio 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>

Mi sembra che la combinazione + HTML + JS CSS dovrebbe ottenere gli effetti desiderati: 

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

...

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

...

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

Qualcuno sa se questo funziona in pratica?

Bene i f i capito la tua domanda correttamente questo dovrebbe essere una risposta. 

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

alla ricerca anche per una buona alternativa al bypass element.innerHTML ho finalmente trovato quella soluzione: 

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);

Un'altra alternativa senza