为什么不添加准备好的div？

Question

这是工作https://jsfiddle.net/w0m89w3e/1/

这不起作用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);
};

错误：

  

未捕获的ReferenceError：未定义new_b   HTMLDivElement.add.onclick

如果我需要将复杂的DIV加载到具有多个嵌套级别的新块中，我该怎么办？

Answer 1

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

在这种情况下，变量div只是一个字符串。您需要在appendChild中使用DOM元素。在第一种情况下，div是元素

您可以将insertAdjacentHTML用于复杂的div

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

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

Answer 2

您没有创建DIV。您需要在追加它之前创建它（或任何元素）。 你是什​​么意思＆＃34;复杂的DIV＆＃34;？你能举个例子吗？

Answer 3

{{1}}