用JavaScript插入HTML元素

而不是单调乏味地使用以下语法search每种types的属性和事件的解决方法：

elem = document.createElement("div"); elem.id = 'myID'; elem.innerHTML = ' my Text ' document.body.insertBefore(elem,document.body.childNodes[0]); 

有没有一种方法可以将整个HTML元素声明为一个string？ 喜欢：

  elem = document.createElement("<div id='myID'> my Text </div>"); document.body.insertBefore(elem,document.body.childNodes[0]); 

Answer 1

而不是直接搞乱innerHTML它可能会更好创build一个片段，然后插入：

 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之外创build元素更快，在某些情况下比innerHTML更快。

---

尽pipe在函数内部使用了innerHTML ，但它都发生在DOM之外，所以它比你想象的要快得多。

Answer 2

你要这个

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

Answer 3

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

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

回应你的评论：

我有兴趣宣布一个新元素的属性和事件的来源，而不是一个元素的innerHTML 。

不过，您需要将新的HTML注入到DOM中; 这就是为什么innerHTML被用在旧的JavaScript的例子。 BODY元素的innerHTML预先添加了新的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 4

看看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'就在元素之内，在它的第一个孩子之前

“之前”就在元素之内，在最后一个孩子之后

'afterend'元素本身之后

Answer 5

据我所知，公平的说，这是相当新的和有限的，这个技术的唯一潜在的问题是，你被阻止dynamic创build一些表格元素。

我通过添加“模板”元素到隐藏的DIV，然后使用cloneNode（true）来创build一个克隆并根据需要附加它来使用表单进行模板化。 承担你需要确保你重新分配ID的要求，以防止重复。

Answer 6

如果您想在现有页面的标签中插入HTML代码，请使用Jnerator 。 这个工具是专门为此目标而创build的。

而不是写下一个代码

  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 prependfunction：

 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/en-US/docs/Web/API/Element/innerHTML

要么：

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

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