webentwicklung-frage-antwort-db.com.de

Alternative für innerHTML?

Ich frage mich, ob es eine Möglichkeit gibt, den Text von HTML-Elementen zu ändern, ohne innerHTML zu verwenden.

Ich frage mich deshalb, weil es vom W3C ein bisschen missbilligt wird ... Ich weiß, es ist pingelig, aber ich möchte nur wissen, gibt es einen Weg?

EDIT: Die Leute scheinen falsch zu verstehen, was ich hier frage: Ich möchte einen Weg finden, den angezeigten Text effektiv zu ändern.

Wenn ich habe:

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

innerHTML erlaubt mir folgendes:

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

Und der Text auf meinem Bildschirm hat sich geändert.
Ich möchte keinen weiteren Text anfügen, ich möchte den bereits vorhandenen Text ändern.

34
KdgDev

Die empfohlene Methode ist die DOM-Manipulation, kann jedoch recht ausführlich 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

Um den aktuellen Inhalt zu ersetzen, entfernen Sie als Antwort auf Ihre Bearbeitung einfach den vorhandenen Inhalt und verwenden dann den obigen Code, um neuen Inhalt einzufügen. Zum Beispiel:

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

Aber, wie jemand anderes sagte, würde ich eher die Verwendung von jQuery empfehlen, da nicht alle Browser DOM vollständig unterstützen und diejenigen, die Quirks haben, die intern von JavaScript-Bibliotheken behandelt werden. Zum Beispiel sieht jQuery so aus:

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

Am besten verwenden Sie document.createTextNode . Einer der Hauptgründe für die Verwendung dieser Funktion anstelle von innerHTML besteht darin, dass alle HTML-Zeichen-Escape-Zeichen für Sie übernommen werden, wohingegen Sie Ihren String selbst entziehen müssten, wenn Sie einfach innerHTML setzen.

11
Andrew Hare

Sie können den gleichen Effekt erzielen, wenn Sie das DOM manipulieren. Der sicherste Weg zum Ändern von Text besteht darin, alle untergeordneten Knoten des Elements zu entfernen und durch einen neuen Textknoten zu ersetzen.

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

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

Wenn Sie die untergeordneten Knoten entfernen, wird der Textinhalt Ihres Elements entfernt, bevor Sie ihn durch den neuen Text ersetzen.

Die meisten Entwickler vermeiden die Verwendung von innerHTML, weil der Zugriff auf Elemente über das DOM standardkonform ist.

7
Bill the Lizard

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

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

Beachten Sie jedoch, dass innerHTML Teil des kommenden HTML 5-Standards sein wird.

6
Ionuț G. Stan

Einfach. 

Ersetzen Sie text.innerHTML = 'two' durch text.firstChild.nodeValue = 'two'.

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

Dies kann für Sie ebenso unangenehm wie innerHTML sein, aber es hat den Vorteil, dass es in einigen Fällen (IE) funktioniert, wo innerHTML oder appendChild nicht wie einige Tabellenknoten den Text von Stil- und Skriptelementen und den Wert von Formularfeldern verwenden

2
kennebec

Sie können DOM wie folgt verwenden:

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

Ich denke jedoch, dass dies selten jemand tut, aber stattdessen ein Framework wie jQuery oder Prototype oder ein anderes Javascript-Framework aus there verwenden. Dies ist ein 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>
1
Sergej Andrejev

Nun, wenn ich Ihre Frage richtig verstehe, sollte dies eine Antwort sein.

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

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

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

...

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

...

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

Weiß jemand, ob das in der Praxis funktioniert?

1
ilya n.

Auch auf der Suche nach einer guten Alternative zu Bypass element.innerHTML fand ich schließlich diese 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 <template> -Tags, aber stattdessen eine Schleife:

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

Denken Sie daran, dass diese Methode tatsächlich Inhalt hinzufügt, wenn innerHTML den Inhalt ersetzt ...

Das kann helfen:

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

1
user7674857

Manchmal ist es hilfreich, einen direkten Verweis auf den Textknoten zu speichern, wenn ich ihn regelmäßig aktualisieren möchte. Ich mache so etwas:

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

Und dann, wenn ich es aktualisieren muss, mache ich einfach Folgendes:

dynamicText.nodeValue = "the updated text";

Dies verhindert, dass Sie durch das DOM gehen oder Kinder hinzufügen oder entfernen müssen.

0
Code83

insertAdjacentHTML () ist der Weg zu gehen. Lesen Sie mehr: Klicken Sie hier für Dokumentation

0
Heals Legodi