Додавання рядка HTML до DOM

Як додати цей рядок HTML

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

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

(Btw 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 рази швидше, ніж інші розчини на хромі та сафарі, 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 (140k операцій в секунду) найшвидший, 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 має два must-have:

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 очистить усі дані, такі як подія для існуючих вузлів

додавання дитини до firstChild додає лише перший дитина до innerHTML. Наприклад, якщо нам потрібно додати:

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

відобразиться лише текст1

Як що до цього:

додає спеціальний тег до innerHTML додаванням дочірньої програми, а потім редагує externalHTML, видаляючи створений нами тег. Не знаю, наскільки він розумний, але він працює для мене, або ви можете змінити 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 символів (не плутати +=(згадати ОП) з =більш детальною інформацією тут )

test.innerHTML=str

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

test.innerHTML=str

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