CreateTextNode in Javascript hängt HTML-Inhalt an

Question

Ich versuche, HTML-formatierten Block an ein vorhandenes div mit append Kind anfügen. Aber ich sehe, dass der HTML-Code anstelle von formatiertem HTML angehängt ist. Irgendein Zeiger auf, wie man HTML-Entwurf anstelle von HTML-Code mit appendChild und createTextNode hinzufügt?

Fiddle

<div id="currentElement"> 
    <div> 
    <h2> 
    Hello test 
    </h2> 
    </div> 
</div> 

Script

var ele = document.getElementById("currentElement"); 
var newHtml = "<div><h3>hello test continued</h3></div>"; 
ele.appendChild(document.createTextNode(newHtml)); 

Answer 1

Warum nicht einfach verwenden Element.innerHTML? Sie können ele.innerHTML = newHtml verwenden, um den Inhalt zu überschreiben, oder ele.innerHTML += newHtml, um den vorhandenen Inhalt hinzuzufügen.

var ele = document.getElementById("currentElement"); 
 
var newHtml = "<div><h3>hello test continued</h3></div>"; 
 
ele.innerHTML += newHtml;

<div id="currentElement"> 
 
    <div> 
 
    <h2> 
 
     Hello test 
 
    </h2> 
 
    </div> 
 
</div>

Beachten Sie, dass diese alle vorhandenen Ereignishandler entfernen. Um Handler zu halten, sollten Sie Element.insertAdjacentHTML() statt:

var ele = document.getElementById("currentElement"); 
 
var newHtml = "<div><h3>hello test continued</h3></div>"; 
 
ele.insertAdjacentHTML('beforeend', newHtml);

<div id="currentElement"> 
 
    <div> 
 
    <h2> 
 
     Hello test 
 
    </h2> 
 
    </div> 
 
</div>

Beachten Sie, dass .insertAdjacentHTML() die Fähigkeit wo die eingefügten Text sollte mit einer der folgenden Optionen als die gehen zu wählen, bietet (obligatorisch) erster Funktionsparameter:

• beforebegin: Bef Erz das Element selbst.
• afterbegin: Nur innerhalb des Elements, vor seinem ersten Kind.
• beforeend: Nur innerhalb des Elements, nach seinem letzten Kind.
• afterend: Nach dem Element selbst.

Ich bin mit beforeend im obigen Beispiel gegangen.

Hoffe, das hilft! :)

Answer 2

Wenn Sie Ereignis-Listener erhalten möchten, haben Sie zwei Möglichkeiten

// sample event listener 
 
document.querySelector('#currentElement h2').addEventListener('click',() => console.log('click works')); 
 
// code starts here 
 
var ele = document.getElementById("currentElement"); 
 
var div = document.createElement('div'), 
 
    h3 = document.createElement('h3'), 
 
    txt = document.createTextNode('hello test continued'); 
 
div.appendChild(h3); 
 
h3.appendChild(txt); 
 
ele.appendChild(div);

<div id="currentElement"> 
 
    <div> 
 
    <h2> 
 
    Hello test 
 
    </h2> 
 
    </div> 
 
</div>

oder

// sample event listener 
 
document.querySelector('#currentElement h2').addEventListener('click',() => console.log('click works')); 
 
// code starts here 
 
var ele = document.getElementById("currentElement"); 
 
var newHtml = "<div><h3>hello test continued</h3></div>"; 
 
ele.insertAdjacentHTML('beforeend', newHtml);

<div id="currentElement"> 
 
    <div> 
 
    <h2> 
 
    Hello test 
 
    </h2> 
 
    </div> 
 
</div>

Answer 3

Wenn Sie will es durch appendChild, tut es auf diese Weise:

var newHtml = "<div><h3>hello test continued</h3></div>"; 
var child = document.createElement('div'); 
child.innerHTML = newHtml; 
child = child.firstChild; 
document.getElementById('currentElement').appendChild(child); 

https://jsfiddle.net/vdv6yqcL/10/