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

Как добавить эту HTML-строку

var str = '<p>Just some <span>text</span> here</p>';

в DIV с идентификатором, 'test'который находится в DOM?

(Кстати, div.innerHTML += str;это не приемлемо.)

Используйте, insertAdjacentHTMLесли он доступен, в противном случае используйте какой-то запасной вариант. insertAdjacentHTML поддерживается во всех текущих браузерах .

div.insertAdjacentHTML( 'beforeend', str );

Живая демонстрация: http://jsfiddle.net/euQ5n/

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

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

jsFiddle .

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

Производительность

AppendChild(E) более чем в 2 раза быстрее, чем другие решения для Chrome и Safari, insertAdjacentHTML(F) является самым быстрым в firefox. innerHTML=(B) (не путать с +=(А)) является вторым быстрым решением во всех браузерах , и это гораздо удобнее , чем Е и F.

подробности

Настройка среды (2019.07.10) MacOs High Sierra 10.13.4 в Chrome 75.0.3770 (64-разрядная версия), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-разрядная версия)

• в Chrome E (140 тыс. операций в секунду) - самый быстрый, B (47k) и F (46k) - второй, A (332) - самый медленный
• в firefox F (94k) самый быстрый, затем B (80k), D (73k), E (64k), C (21k) самый медленный - A (466)
• в Safari E (207k) самый быстрый, затем B (89k), F (88k), D (83k), C (25k), самый медленный - A (509)

Вы можете воспроизвести тест на своей машине здесь

function A() {    
  container.innerHTML += '<p>A: Just some <span>text</span> here</p>';
}

function B() {    
  container.innerHTML = '<p>B: Just some <span>text</span> here</p>';
}

function C() {    
  $('#container').append('<p>C: Just some <span>text</span> here</p>');
}

function D() {
  var p = document.createElement("p");
  p.innerHTML = 'D: Just some <span>text</span> here';
  container.appendChild(p);
}

function E() {    
  var p = document.createElement("p");
  var s = document.createElement("span"); 
  s.appendChild( document.createTextNode("text ") );
  p.appendChild( document.createTextNode("E: Just some ") );
  p.appendChild( s );
  p.appendChild( document.createTextNode(" here") );
  container.appendChild(p);
}

function F() {    
  container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>');
}

A();
B();
C();
D();
E();
F();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This snippet only for show code used in test (in jsperf.com) - it not perform test itself. 
<div id="container"></div>

Идея состоит в том, чтобы использовать 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отмечает скрипты как невыполнимые.)

Быстрый взлом :

<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. Пришел сюда в поисках быстрого решения. Я просто хочу увидеть результаты нескольких строк кода блокнота, другие решения требуют слишком много работы.

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

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

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

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

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

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

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

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

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

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

добавляет специальный тег в innerHTML, добавляя дочерний элемент, а затем редактирует внешний HTML, удаляя созданный нами тег. Не знаю, насколько это умно, но у меня это работает, или вы можете изменить externalHTML на 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>

Самый короткий - 18 символов (не путать +=(упоминание OP) с =более подробной информацией здесь )

test.innerHTML=str

var str = '<p>Just some <span>text</span> here</p>';

test.innerHTML=str

<div id="test"></div>