Добавление HTML-строки в DOM

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

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 отмечает скрипты не подлежащие исполнению.)

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

<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-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit)):

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

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

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

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

был бы учебник способ сделать это.

быстрая Hack:

---

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

---

Варианты Использования:

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

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 имеет два must haves:

1. нет автозаполнения
2. вертикальный монитор-фрэндли

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

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

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

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

добавить ребенка с firstChild добавляет только первый ребенок в innerHTML. Например, если мы должны добавить:

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

только text1 появится

как насчет этого:

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

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>

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