Uncaught (в обещании) TypeError: Не удалось выполнить 'appendChild' в 'Node': параметр 1 не имеет тип 'Node' [duplicate]

Это приемлемо?

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);

jsFiddle .

Но, Ответ Нила является лучшим решением.

Идея состоит в том, чтобы использовать innerHTML в промежуточном элементе, а затем переместить все его дочерние узлы туда, где вы действительно хотите их через appendChild.

var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';

var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
  target.appendChild(temp.firstChild);
}

Это позволяет избежать уничтожения любого события обработчики на div#test, но все же позволяют добавлять строку HTML.

Правильный способ использует insertAdjacentHTML. В Firefox раньше 8 вы можете вернуться к использованию Range.createContextualFragment, если ваш str не содержит тегов script.

Если ваш str содержит метки script, вам нужно удалить script из фрагмента, возвращаемого createContextualFragment, перед вставкой фрагмента. В противном случае скрипты будут запущены. (insertAdjacentHTML отмечает, что скрипты не исполняются.)

Quick Hack:

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

Использовать Случаи:

1: Сохранить как .html-файл и запуститься в chrome или firefox или edge. (IE не работает)

2: Использовать в http://js.do

В действии: http://js.do / HeavyMetalCookies / quick_hack

Разбито с комментариями:

<script>

//: The message "QUICK_HACK" 
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";

//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad, 
//: it should be visible.
var child = document.children[0];

//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;

</script>

Причина Почему я опубликовал:

У JS.do есть два обязательных объекта:

1. Нет автозаполнения
2. Совместимый с вертикальным монитором

Но не отображается сообщение console.log. Пришел сюда, чтобы найти быстрое решение. Я просто хочу увидеть результаты нескольких строк кода блокнота, другие решения - слишком много работы.

Вот несколько тестов производительности:

<div id="container"></div>

И 4 решения:

1. document.getElementById('container').innerHTML += '<p>Just some <span>text</span> here</p>';
2. $('#container').append('<p>Just some <span>text</span> here</p>');
3. var div = document.createElement("div"); div.innerHTML = '<p>Just some <span>text</span> here</p>'; document.getElementById('container').appendChild(div)
4. document.getElementById('container').insertAdjacentHTML('beforeend', '<p>Just some <span>text</span> here</p>');

Настройка среды (2018.07.02) MacOs High Sierra 10.13.3 на Chrome 67.0.3396.99 (64-разрядная ), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-разрядная версия)):

Как видим, insertAdjacentHTML является (Safari 110M операций в секунду, Chrome 65M, Firefox 39M), поэтому простой javascript быстрее, чем jQuery (во всех браузерах). ВнутреннийHTML + = ... медленнее, чем jQuery для всех браузеров.

Вы можете повторить тест на вашем компьютере здесь: https://jsperf.com/insert-html-ttest

Почему это неприемлемо?

document.getElementById('test').innerHTML += str

будет способом учебника.

Позиции beforebegin и afterend работают только в том случае, если узел находится в дереве и имеет родительский элемент. - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Это может решить

 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');

InnerHTML очистить все данные, такие как событие для существующих узлов

append child with firstChild добавляет только первого дочернего элемента в innerHTML. Например, если нам нужно добавить:

 <p>text1</p><p>text2</p>

, будет отображаться только текст1

. Об этом:

добавляет специальный тег к innerHTML, добавляя дочерние и затем отредактируйте externalHTML, удалив тег, который мы создали. Не знаю, насколько он умен, но он работает для меня, или вы можете изменить внешнийHTML на innerHTML, поэтому ему не нужно использовать функцию replace

function append(element, str)
{

  var child = document.createElement('someshittyuniquetag');
		
  child.innerHTML = str;

  element.appendChild(child);

  child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');

// or Even child.outerHTML = child.innerHTML


  
}

<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>