如何用JavaScript插入HTML元素？(实用）

淡淡的烟草味﹌ 2023-07-06 14:37 27阅读 0赞

原文出处：[https://cloud.tencent.com/developer/ask/29126][https_cloud.tencent.com_developer_ask_29126]  （建议读原文）

如何不单调乏味地使用以下语法搜索每种类型的属性和事件的解决方法：

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]);

写回答关注邀请回答

用户回答回答于 2018-01-032018-01-03 15:35:45

不直接搞乱**`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]);

优点：

1.  你可以使用本地DOM方法插入，如insertBefore，appendChild等
2.  你可以在插入之前访问实际的DOM节点; 你可以访问片段的childNodes对象。
3.  使用文档片段非常快速; 比在DOM之外创建元素更快，在某些情况下比innerHTML更快。

尽管**`innerHTML`**在函数中使用，但它都发生在DOM之外，所以它比你想象的要快得多。

赞0收藏0评论0分享

[不直接搞乱innerHTML可能会更好创建一个片段： function create(htmlStr) \{ var frag = document.createDocumentFragment(), temp = document.createEleme...][innerHTML_ function create_htmlStr_ _ var frag _ document.createDocumentFragment_ temp _ document.createEleme...]

用户回答回答于 2018-01-032018-01-03 16:46:29

你想要这个

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

[https_cloud.tencent.com_developer_ask_29126]: https://cloud.tencent.com/developer/ask/29126
[innerHTML_ function create_htmlStr_ _ var frag _ document.createDocumentFragment_ temp _ document.createEleme...]: https://cloud.tencent.com/developer/ask/29126/answer/36633