Question

使用以下语法时，不要繁琐地搜索每种类型的属性和事件的变通方法：

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

Answer 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之外发生，所以它比你想象的要快得多......

Answer 2

你想要这个

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

Answer 3

查看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>

位置是相对于您插入的元素的位置：

<强> 'beforebegin' 在元素本身之前

<强> 'afterbegin' 就在元素内部，在它的第一个孩子之前

<强> 'beforeend' 就在元素里面，在它的最后一个孩子之后

<强> 'afterend' 元素本身之后

Answer 4

在旧式JavaScript中，你可以这样做：

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

回应你的评论：

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

您需要将新的HTML注入DOM中;这就是为什么在旧的JavaScript示例中使用innerHTML的原因。 innerHTML元素的BODY前面加上新的HTML。我们并没有真正触及BODY内的现有HTML。

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

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

Answer 5

据我所知，公平地说，这是相当新的和有限的，这种技术的唯一潜在问题是你无法动态创建一些表格元素。

我使用表单进行模板化，方法是将“模板”元素添加到隐藏的DIV中，然后使用cloneNode（true）创建克隆并根据需要附加它。请确保您需要确保根据需要重新分配ID以防止重复。

Answer 6

如果要在现有页面标记内插入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;

Answer 7

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

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

虽然有些人说最好不要＆＃34;混乱＆＃34;使用 innerHTML ，如果您知道这一点，它在许多用例中都是可靠的：

如果<div>，<span>或<noembed>节点的子文本节点包含字符（&），（<），或者（>），innerHTML分别将这些字符作为&amp，&lt和&gt返回。使用Node.textContent获取这些文本节点的正确副本＆＃39;内容。

https://developer.mozilla.org/en-US/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

使用JavaScript插入HTML元素

7 个答案: