Alternative für innerHTML-?

https://stackoverflow.com/questions/718091

23-08-2019
|

Frage

Ich frage mich, ob es einen Weg gibt, ohne innerHTML- den Text etwas in HTML zu ändern.

Reason Ich frage, weil es irgendwie auf die vom W3C verpönt ist. Ich weiß, es ist pingelig, aber ich will nur wissen, gibt es eine Möglichkeit?

EDIT: Menschen scheinen falsch zu verstehen, was ich frage hier:. Ich möchte einen Weg finden, um effectivly den Text zu ändern angezeigt wird

Wenn ich:

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

innerHTML- erlaubt es mir, dies zu tun:

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

Und der Text auf meinem Bildschirm wird geändert.
Ich möchte nicht mehr Text anhängen möchte ich allready Text bestehende ändern.

Lösung

Die empfohlene Methode ist durch DOM-Manipulation, aber es kann sehr umfangreich sein. Zum Beispiel:

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

Bearbeiten

Als Antwort auf Ihre bearbeiten, um den aktuellen Inhalt zu ersetzen, entfernen Sie einfach den vorhandenen Inhalt, dann verwenden Sie den Code oben in neuen Inhalten zu füllen. Zum Beispiel:

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

Aber als jemand anderes gesagt, würde ich mit so etwas wie jQuery empfehlen stattdessen, da nicht alle Browser vollständig DOM unterstützen, und diejenigen, die Macken tun haben, die mit intern von JavaScript-Bibliotheken behandelt werden. Zum Beispiel sieht jQuery so etwas wie folgt aus:

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

Andere Tipps

Der bessere Weg, es zu tun ist, zu verwenden, document.createTextNode . Einer der Hauptgründe für die Verwendung dieser Funktion anstelle von innerHTML ist, dass alle Entkommen HTML-Zeichen wird für Sie gesorgt werden, während Sie Ihre Zeichenfolge selbst entrinnen müsste, wenn Sie einfach innerHTML Einstellung wurden.

Sie können den gleichen Effekt durch die DOM-Manipulation. Der sicherste Weg, um Text zu ändern ist, um alle untergeordneten Knoten des Elements zu entfernen und sie mit einem neuen Textknoten ersetzen.

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

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

die untergeordneten Knoten Entfernen wird der Textinhalt des Elements zu befreien, bevor es mit dem neuen Text zu ersetzen.

Der Grund, warum die meisten Entwickler innerHTML- vermeiden ist, dass Elemente durch den DOM Zugriff ist standardkonform.

Wenn Sie nur Klartext ändern wollen, dann gibt es eine schnellere Lösung, die auf Standards basiert:

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

Wie auch immer, bitte beachten Sie, dass innerHTML- wird Teil der kommenden HTML-5-Norm sein.

Einfach.

Ersetzen text.innerHTML = 'two' mit 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;

Dies kann als anstößig als innerHTML- Ihnen sein, aber es hat den Vorteil, in einigen Fällen arbeiten (IE), wo innerHTML- oder appendChild nicht, wie einige Tabellenknoten, der Text des Stils und der Script-Elemente und der Wert der Form Felder

Sie können DOM verwenden, wie folgt:

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

Aber ich denke, jemand dies selten tun, sondern einen Rahmen wie jQuery oder Prototype oder andere javaScript-Framework heraus dort statt . Dies ist jquery Beispiel:

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

Es scheint mir, dass die CSS + HTML + JS Kombination gewünschte Effekte erzielen sollte:

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

...

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

...

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

Wer weiß, ob dies in der Praxis funktioniert?

Nun, ich f Ich verstehe Ihre Frage richtig soll dies eine Antwort sein.

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

Auch auf der Suche nach einer guten Alternative zu dem Bypass element.innerHTML Schließlich fand ich, dass die Lösung:

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

Eine weitere Alternative ohne