將 HTML 字符串附加到 DOM

Question

如何 append 一個 HTML 字符串如

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

到帶有 id test的<div> ？

（順便說一句div.innerHTML += str;是不可接受的。）

Answer 1

使用所有當前瀏覽器都支持的insertAdjacentHTML ：

div.insertAdjacentHTML( 'beforeend', str );

位置參數beforeend將添加到元素內部，在其最后一個子元素之后。

現場演示：http: //jsfiddle.net/euQ5n/

Answer 2

表現

AppendChild (E) 在 chrome 和 safari 上比其他解決方案快 2 倍以上， insertAdjacentHTML (F) 在 firefox 上最快。 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（每秒 140k 操作）上最快，B（47k）和 F（46k）次之，A（332）最慢
• 在 firefox 上 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)

您可以在您的機器上重放測試here

 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>

Answer 3

這可以接受嗎？

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

js小提琴。

但是，尼爾的答案是一個更好的解決方案。

Answer 4

這個想法是在中間元素上使用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 字符串。

Answer 5

正確的方法是使用insertAdjacentHTML 。 在 Firefox 8 之前的版本中，如果您的str不包含script標簽，您可以回退到使用Range.createContextualFragment 。

如果您的str包含script標簽，則需要在插入片段之前從createContextualFragment返回的片段中刪除script元素。 否則，腳本將運行。 （ insertAdjacentHTML腳本標記為不可執行。）

Answer 6

快速破解：

---

<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 消息。 來這里尋找快速解決方案。 我只是想看看幾行暫存代碼的結果，其他的解決方案工作量太大。

Answer 7

這可以解決

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

Answer 8

InnerHTML 清除所有數據，例如現有節點的事件

append child with firstChild 僅將第一個子元素添加到 innerHTML。 例如，如果我們必須附加：

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

只有 text1 會顯示

那這個呢：

通過追加子元素將特殊標簽添加到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>

Answer 9

為什么這是不可接受的？

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

將是教科書的做法。

Answer 10

最短- 18 個字符（不要混淆+= （由 OP 提及）與=此處有更多詳細信息）

test.innerHTML=str

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

 <div id="test"></div>