DOM注入沒有jquery

Question

我想知道如何注入DOM注入HTML標記，而不使用jQuery庫。

我們想從外部JavaScript文件生成幾個對象到原始頁面，但我們不想依賴於jquery（因爲它是90kb），我們不能控制將使用的站點我們的劇本。

Answer 1

要麼使用

object.innerHTML = "<br/><span>Text</span>" 

或者使用的appendChild：

var child = element.appendChild(child); 

https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild?redirectlocale=en-US&redirectslug=DOM%2Felement.appendChild

這兩部作品。

Answer 2

你只是在尋找：

newNode = document.createElement(tagType); 

和

parent.appendChild(newNode); 

更多有關document級的功能，看https://developer.mozilla.org/en-US/docs/DOM/document

對於操縱元素的方法，請參閱https://developer.mozilla.org/en-US/docs/DOM/element

Answer 3

如果你有很多元素，創造和它們包含在一個共同的根節點，我建議建立一個documentFragment和追加到它，你需要通過createElement()生成的所有節點和appendChild()方法

然後，只需追加所述documentFragment到文檔

從MDN參考：createDocumentFragment

由於文檔片段是在存儲器中且不是主要的DOM樹的一部分，將子添加到它不會導致頁面重排（元素位置和幾何的計算）。因此，使用文檔片段通常會帶來更好的性能