Ошибка типа: не удалось выполнить команду appendChild на узле: параметр 1 не относится к типу узла

Question

Я хочу добавить существующий элемент div для создания определенного дизайна вместе с сообщением об ошибке, извлеченным из массива.

Это была моя попытка:

    if (data.errors.firstName) {
        document.getElementById("firstName").classList.add("has-error");
        document.getElementById("firstName-group").appendChild('<div class="help-block"> </div>');
    }

Но это привело кошибка:

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

Что после исследования означает, что это строка, которую я могу добавить, поскольку она не является действительным dom-узлом.

Как я могу сделать это правильно?

Answer 1

Ваша функция возвращает строку, а не узел div.appendChild может только добавить узел

var d= document.createElement("div");
d.classList.add("help-block");
document.getElementById("firstName-    group").appendChild(d);

Answer 2

Как сообщается об ошибке, parentNode.appendChild() требует DomNode в качестве аргумента;однако если вы вместо этого должны передать HTML-строки, вы можете вместо этого использовать parentNode.append():

if (data.errors.firstName) {
    document.getElementById("firstName").classList.add("has-error");
    document.getElementById("firstName-group").append('<div class="help-block"> </div>');
}

Обратите внимание, что это рассматривается MDN - см. ссылку ниже, - как «экспериментальный»поэтому проверьте совместимость перед использованием.

Рекомендации:

• parentNode.append().

Answer 3

Нельзя передать строковое значение в appendChild, это должно быть Node, которое вы можете создать с помощью document.createElement, например:

document.getElementById("firstName").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
document.getElementById("firstName-group").appendChild(helpBlock);

.has-error {
  border: 1px solid red;
}

.help-block {
  border: 1px solid green;
}

.help-block::after {
  content: 'i am the help block';
}

<div id="firstName-group">
  <div id="firstName">first name</div>
</div>