没有jquery的DOM注入[关闭]

Question

我想知道如何在不使用 jquery 库的情况下通过 DOM 注入来注入 HTML 标签。

我们想从一个外部 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 树的一部分，因此将子片段附加到它不会导致页面重排（计算元素的位置和几何形状）。因此，使用文档片段通常会带来更好的性能