在元素的结尾或者开头插入指定内容

在一个元素内容的结尾或开头插入一个新元素或HTML结构

---

使用元素的属性innerHTML获取或修改其内容:

var el = document.querySelector('div');

// get element content as string
console.log(el.innerHTML)

// append to the element's content
el.innerHTML += '<p>Hello World!</p>';

// prepend to the element's content
el.innerHTML = '<p>Hello World!</p>' + el.innerHTML;
      

innerHTML本质上是字符串形式的元素内容。 但是请注意：修改innerHTML会破坏并重建容器的所有后代元素。 绑定到任何销毁元素的事件处理程序在过程中都会丢失，并且需要时需要重新注册时间处理函数。

或者，也可以使用DOM方法创建，插入和移动元素：

var el = document.querySelector('div');

// create a p element for inserting in el
var newEl = document.createElement('p');
// use the innerHTML property for inserting HTML content
// or append a textNode to the p element
newEl.appendChild(document.createTextNode('Hello World!'));

// append p as a new child to el
el.appendChild(newEl);

// same result with insertBefore()
el.insertBefore(newEl, null);

// use as second argument the child node you want to insert the new node before
// example: prepend newEl as first child to el
el.insertBefore(newEl, el.childNodes[0] || null);
      

这种方法需要更多的代码，并且通常比使用innerHTML慢。 但是，使用DOM方法可确保绑定到元素内容的事件处理程序保持不变。