javascript - Lägga till HTML i containerelement utan innerHTML

Jag behöver ett sätt att lägga till HTML till ett container-element utan att använda innerHTML. Anledningen till att jag inte vill använda innerHTML är för att när det används så här:

element.innerHTML += htmldata

Det fungerar genom att först ersätta all HTML innan den gamla HTML-koden plus den nya HTML-koden läggs till. Detta är inte bra eftersom det återställer dynamiska medier såsom inbäddade flashvideor...

Jag kunde göra det på det här sättet vilket fungerar:

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

Problemet med det sättet är dock att det nu finns en extra span-tagg i dokumentet som jag inte vill ha.

Hur kan detta göras då? Tack!

Svar #1

Kolla in insertAdjacentHTML()-metoden. Den första parametern är var du vill att strängen ska läggas till och tar ("beforebegin", "afterbegin", "beforeend", "afterend"). I OP:s situation skulle du använda "beforeend". Den andra parametern är bara HTML-strängen.

Grundläggande användning:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

Svar #2

För att ge ett alternativ (eftersom användning av DocumentFragment verkar inte fungera): Du kan simulera det genom att iterera över barnen i den nygenererade noden och bara lägga till dem.

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

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

Svar #3

alnafie har ett bra svar på den här frågan. Jag ville ge ett exempel på hans kod som referens:

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>

Förhoppningsvis är detta till hjälp för andra.

Relaterade artiklar