使用JavaScript插入HTML元素

小编典典

使用JavaScript插入HTML元素

javascript

使用以下语法时，不必为每种类型的属性和事件繁琐地搜索解决方法：

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

有没有一种方法可以将整个HTML元素声明为字符串？喜欢：

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

阅读 243

2020-05-01

共1个答案

小编典典

innerHTML 创建片段然后插入该片段可能会更好，而不是直接弄乱它：

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

好处：

您可以使用本机DOM方法进行插入，例如insertBefore，appendChild等。
您可以在插入实际的DOM节点之前对其进行访问；您可以访问片段的childNodes对象。
使用文档片段非常快捷；比在DOM之外创建元素要快，并且在某些情况下要比innerHTML快。

即使 innerHTML 在函数中使用它，它们都发生在DOM之外，因此它比您想象的要快得多。

2020-05-01