小编典典

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

阅读 245

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

好处:

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

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

2020-05-01