使用 JavaScript 插入 HTML 元素

javascript html

2022-08-30 05:41:05

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

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

答案 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节点;您可以访问片段的子节点对象。
使用文档片段非常快;比在 DOM 外部创建元素更快，在某些情况下比 innerHTML 更快。

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

答案 2

你想要这个

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