準備されたdivが追加されないのはなぜですか？

Question

これはhttps://jsfiddle.net/op488m49/1/

HTML

<div id="add">add block</div> 
<div id="new_b"></div> 

動作しないJS 1

var div = ''; 
add.onclick = function() { 
    var div = document.createElement('div'); 
    div.className = "alert"; 
    div.id = "vv"; 
    div.innerHTML = "<strong>Yes!</strong> "; 
    new_b.appendChild(div); 
}; 

JS2

add.onclick = function() { 
    var div = '<div id="a"><p class="my">text</p></div>' 
    new_b.appendChild(div); 
}; 

仕事 https://jsfiddle.net/w0m89w3e/1/

です

エラー：

Uncaught ReferenceError: new_b is not defined at HTMLDivElement.add.onclick

私はいくつかのネストされたレベルを持つ新しいブロックに、複雑なDIVをロードする必要がある場合、私は何をすべき？

Answer 1

var div = ''; 
add.onclick = function() { 
    var div = document.createElement('div'); 
    div.className = "alert"; 
    div.id = "vv"; 
    div.innerHTML = "<div id='complex-div'><strong>Yes!</strong></div>"; 
    new_b.appendChild(div); 
}; 

Answer 2

DIVを作成していません。追加する前にそれを作成する必要があります。 "複雑なDIV"とはどういう意味ですか？あなたは例を見せてもらえますか？

Answer 3

add.onclick = function() { 
    var div = '<div id="a"><p class="my">text</p></div>' 
    new_b.appendChild(div); 
}; 

この場合、変数divは単なる文字列です。 appendChildで使用するには、DOM要素が必要です。最初のケースではdivは、あなたが複雑なのdivのためinsertAdjacentHTMLを使用することができます要素

ある

https://jsfiddle.net/op488m49/2/

add.onclick = function() { 
    var div = '<div id="a"><p class="my">text</p></div>' 
    new_b.insertAdjacentHTML('beforeend', div); 
};