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