Alternative per innerHTML?
-
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.
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 tag, ma invece ciclo:
HTMLElement.prototype.htmlContent = function(html)
{
var dom = new DOMParser().parseFromString(html, 'text/html').body;
while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}
Tieni presente che questo metodo in realtà 'aggiungere' contenuto quando innerHTML 'sostituire' contenuto ...
Questo può aiutare:
HTMLElement.prototype.clearContent = function()
{
while (this.hasChildNodes()) this.removeChild(this.lastChild);
}
//-- document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();
doc: https://github.com/swannty/escaping-innerHTML
perf: https://jsperf.com/escaping-innerhtml
A volte mi trovo utile per memorizzare un riferimento diretto al nodo di testo se ho intenzione di essere l'aggiornamento regolarmente. Faccio qualcosa di simile a questo:
var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));
E poi ogni volta che ho bisogno di aggiornarlo, io faccio solo questo:
dynamicText.nodeValue = "the updated text";
Questo evita di dover camminare il DOM o aggiungere o rimuovere eventuali figli.
insertAdjacentHTML () è la strada da percorrere. Leggi di più: Clicca per la documentazione