Javascript - добавить HTML к элементу контейнера без innerHTML - PullRequest
Новая
       38

Javascript - добавить HTML к элементу контейнера без innerHTML

136 голосов
/ 10 июня 2011

Мне нужен способ добавить HTML к элементу контейнера без использования innerHTML. Причина, по которой я не хочу использовать innerHTML, заключается в том, что когда он используется следующим образом:

element.innerHTML += htmldata

Он работает путем замены всего HTML-кода перед добавлением старого HTML-кода и нового HTML-кода. Это не хорошо, потому что он сбрасывает динамические носители, такие как встроенные флэш-видео ...

Я мог бы сделать это следующим образом: 

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

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

Как это можно сделать тогда? Спасибо!

Ответы [ 5 ]

471 голосов
/ 24 марта 2012

Я удивлен, что ни в одном из ответов не упоминается метод insertAdjacentHTML().Проверьте это здесь .Первый параметр - это место, где вы хотите, чтобы строка добавлялась и принималась («beforebegin», «afterbegin», «beforeend», «afterend»).В ситуации ОП вы должны использовать «beforeend».Второй параметр - это просто строка html.

Основное использование: 

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
80 голосов
/ 10 июня 2011

Чтобы дать альтернативу (поскольку использование DocumentFragment, похоже, не работает): Вы можете смоделировать ее, перебирая дочерние элементы только что сгенерированного узла и добавляя только те. 

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}
12 голосов
/ 02 февраля 2017

У alnafie отличный ответ на этот вопрос.Я хотел привести пример своего кода для справки: 

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}
body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}
<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Надеюсь, это полезно для других.

2 голосов
/ 09 июня 2015 
<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

назначьте данные для div с символом "+ =", вы можете добавить данные, включая предыдущие html-данные

1 голос
/ 10 июня 2011

Это то, для чего предназначалось DocumentFragment. 

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

...