javascriptのCreateTextNodeはhtmlコンテンツを追加します

Question

HTMLの書式設定されたブロックをappend子を使用して既存のdivに追加しようとしています。しかし、私はhtmlコードがフォーマットされたhtmlの代わりに追加されているのを見ます。 appendChildとcreateTextNodeのhtmlコードの代わりにhtmlデザインを追加する方法に関するあらゆるポインタ？

Fiddle

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

スクリプト

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

Answer 1

はなぜちょうどElement.innerHTMLを使わないのでしょうか？ ele.innerHTML = newHtmlを使用してコンテンツを上書きするか、ele.innerHTML += newHtmlを使用して既存のコンテンツに追加することができます。

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>

これは、既存のイベントハンドラを削除することに注意してください。ハンドラを保持するためには、Element.insertAdjacentHTML()代わりに使用する必要があります：.insertAdjacentHTML()が挿入されたテキストとして、次のいずれかに行くべき場所を選択する機能を提供

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>

に留意されたいです。 （必須）最初の関数パラメータ：

• ：Bef要素そのもの。
• afterbegin：最初の子の前の要素のすぐ内側。
• beforeend：最後の子の後に要素のすぐ内側にあります。
• afterend：要素自体の後。

私は上記の例でbeforeendに行っています。

希望すると便利です。あなたはイベントリスナーを保持したい場合場合:)

Answer 2

は、次の2つのオプション

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

または

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

を持っていますappendChildでそれを行うたい、このようにそれを実行します。

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/