使用JavaScript插入HTML元素

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

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

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之外，因此它的速度比您想象的要快得多。

你要这个

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

看看insertAdjacentHTML

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

position是相对于您要插入的元素的位置，该位置与以下位置相邻：

'beforebegin' 元素本身之前

'afterbegin' 在元素内部，在其第一个孩子之前

'beforeend' 在元素的最后一个子元素之后

'afterend' 在元素本身之后

在老式JavaScript中，您可以执行以下操作：

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

针对您的评论：

[...]我有兴趣声明新元素的属性和事件的来源，而不是innerHTML元素的来源。

不过，您需要将新的HTML注入DOM；这就是为什么innerHTML在老式JavaScript示例中使用的原因。在innerHTML该的BODY元素被换成了新的HTML。我们并没有真正接触到BODY。

我将重写上述示例以澄清这一点：

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

使用JavaScript框架将使此代码的详细程度降低，并提高可读性。例如，jQuery允许您执行以下操作：

$('body').prepend('<p id="foo">Some HTML</p>');

据我所知，公平地讲，这是相当新的且有限的，此技术的唯一潜在问题是，您无法动态创建某些表元素。

我通过向隐藏的DIV中添加“模板”元素然后使用cloneNode（true）创建一个克隆并根据需要附加它来使用模板进行模板化。请注意，您确实需要确保根据需要重新分配ID，以防止重复。

正如其他人所说，方便的jQuery 前置功能可以被模拟：

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

尽管有些人说最好不要使用innerHTML，但在许多用例中，如果您知道这一点，它是可靠的：

如果<div>，<span>或者<noembed>节点具有包括字符（一个子文本节点&），（ <），或（>），innerHTML的返回这些字符作为&amp，&lt和&gt分别。使用Node.textContent获得的这些文本节点的内容的正确副本。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML

要么：

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTML可能是一个很好的选择：https : //developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

如果要在现有页面的标签内插入HTML代码，请使用Jnerator。该工具是专门为此目的而创建的。

而不是编写下一个代码

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

您可以编写更易理解的结构

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;