javascript - Lägga till HTML-sträng i DOM

Hur man lägger till en HTML-sträng såsom

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

till <div> med id test?

(Förresten div.innerHTML += str; är inte acceptabelt.)

Svar #1

Använd insertAdjacentHTML som stöds i alla nuvarande webbläsare:

div.insertAdjacentHTML( 'beforeend', str );

Positionsparametern beforeend lägger till inuti elementet, efter dess sista barn.

Live-demo: http://jsfiddle.net/euQ5n/

Svar #2

Prestanda

AppendChild (E) är mer än 2 gånger snabbare än andra lösningar på Chrome och Safari, insertAdjacentHTML (F) är snabbast på Firefox. innerHTML= (B) (förväxla inte med += (A)) är den näst snabbaste lösningen på alla webbläsare och det är mycket mer praktiskt än E och F.

Detaljer

Ställ in miljö (2019.07.10) MacOs High Sierra 10.13.4 på Chrome 75.0.3770 (64-bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-bit)

  • på Chrome är E (140k operationer per sekund) snabbast, B (47k) och F (46k) är tvåa, A (332) är långsammast
  • på Firefox är F (94k) snabbast, sedan B (80k), D (73k), E (64k), C (21k) långsammast är A (466)
  • på Safari är E(207k) snabbast, sedan B(89k), F(88k), D(83k), C(25k), långsammast är A(509)

Du kan spela upp testet på din dator här

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>

Svar #3

Är detta acceptabelt?

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

jsFiddle.

Men, Neils svar är en bättre lösning.

Svar #4

Idén är att använda innerHTML på ett mellanliggande element och sedan flytta alla dess barnnoder till där du egentligen vill ha dem via 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);
}

Detta undviker att ta bort eventhanterare på div#test men låter dig ändå lägga till en HTML-sträng.

Relaterade artiklar