it-swarm.com.ru

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

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

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

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

(Кстати, div.innerHTML += str; не допускается.)

70
Šime Vidas

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

div.insertAdjacentHTML( 'beforeend', str );

Демонстрация в реальном времени:http://jsfiddle.net/euQ5n/

163
Neil

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

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

jsFiddle .

Но, ответ Нейла это лучшее решение.

13
alex

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

8
Chris Calo

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

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

3
hsivonen

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

<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-разрядная версия):

 enter image description here

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

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

2
Kamil Kiełczewski

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

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

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

1
Nick Brunt

Быстрый Взломать:


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

1
J.M.I. MADISON

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

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

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>

0
Łukasz Szpak