Почему не добавляется заготовленный блок?

Question

[DrunkMaster]

Так работает https://jsfiddle.net/w0m89w3e/
Так не работает https://jsfiddle.net/op488m49/
Ошибка:

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

(ругается на строку new_b)

HTML

<div id="add">Добавить блок</div>
<div id="new_b"></div>

JS в первом случае:

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

JS в во втором:

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

Что делать если в новый блок надо загрузить довольно сложную конктрукцию с несколькими вложенными уровнями?

Answer 1

[Stalker_RED]

Эм... вообще-то там другая ошибка:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at HTMLDivElement.add.onclick ((index):48)

Это потому, что div у вас в виде строки, а ожидается Node.

Сложную конструкцию быстрее всего загружать при помощи innerHTML. А зачастую не только быстрее, но и проще.

Comments

[DrunkMaster]

Ну innerHTML я, наверное использовать не могу, ведь ожадиется что будет добавлено несколько блоков таким образом. А как мне сделать Node что бы мой div перестал быть строкой?

[Stalker_RED]

DrunkMaster: Что вам мешает использовать innerHTML несколько раз?

var div = document.createElement('div') // эй, вы же уже делали такое в первом примере
div.id = 'a'
div.innerHTML = '<p class="my">текст</p>';
new_b.appendChild(div);

[DrunkMaster]

Stalker_RED: WOW спасибо!

Answer 2

[RidgeA]

у меня ошибка другая

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

что, в принципе, логично
https://www.w3.org/TR/DOM-Level-3-Core/core.html#I...

Answer 3

[Дмитрий Беляев]

Для добавления к элементу нераспаршенного html существует insertAdjacentHTML

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