将 HTML 字符串追加到 DOM

为什么不能接受？

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

是教科书式的做法。

使用 insertAdjacentHTML，其中 当前所有浏览器都支持:

div.insertAdjacentHTML( 'beforeend', str );

位置参数 beforeend将在元素的最后一个子元素之后添加到元素内部。

现场演示: < a href = “ http://jsfiddle.net/euQ5n/”rel = “ norefrer”> http://jsfiddle.net/euq5n/

正确的方法是使用 insertAdjacentHTML。在早于8的 Firefox 中，如果您的 str不包含 script标记，则可以回到使用 Range.createContextualFragment。

如果您的 str包含 script标记，您需要在插入片段之前从 createContextualFragment返回的片段中删除 script元素。否则，脚本将运行。(insertAdjacentHTML标记脚本不可执行。)

其思想是在中间元素上使用 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 字符串。

这个可以解决

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

表演

在 chrome 和 safari 上，AppendChild(E)的速度是其他解决方案的2倍多，而在 Firefox 上，insertAdjacentHTML(F)的速度是最快的。innerHTML=(B)(不要和 +=(A)混淆)在所有浏览器上都是第二快的解决方案，它比 E 和 F 更方便。

细节

在 Chrome 75.0.3770(64位) ，Safari 11.1.0(13604.5.6) ，Firefox 67.0.0(64位)上设置环境(2019.07.10) MacOs High Sierra 10.13.4

• Chrome E (每秒14万次运算)最快，B (47k)和 F (46k)位居第二，A (332)最慢
• 火狐 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)

可以在机器 给你中重播测试

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>

InnerHTML 为现有节点清除所有类似事件的数据

使用 firstChild 的 append child 只向 innerHTML 添加第一个 child:

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

只有 text1会出现

这个怎么样:

通过 append child 向 innerHTML 添加特殊标记，然后通过删除我们创建的标记来编辑 outerHTML。不知道有多聪明，但对我很有用 或者可以将 outerHTML 更改为 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>

快速 黑客:

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

用例 :

<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>