Подтвердить что ты не робот

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

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

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

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

(Btw div.innerHTML += str; неприемлемо.)

4b9b3361

ОТВЕТЫ

Ответ 2

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

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

jsFiddle.

Но Нил ответ - лучшее решение.

Ответ 3

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

Ответ 4

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

Настройка среды (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-разрядная версия)

enter image description here

  • на Chrome E (140 тыс. операций в секунду) самый быстрый, B (47 тыс.) и F (46 тыс.) вторые, 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)

Резюме

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

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>

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Случаи использования:

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

Ответ 8

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

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

Ответ 9

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

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

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

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

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

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