JavaScript Element insertAdjacentHTML() 方法

• 

  JavaScript Element insertAdjacentHTML() 方法

  insertAdjacentHTML()方法将文本作为HTML插入到指定位置。 合法值：

  • “afterbegin”
  • “afterend”
  • “beforebegin”
  • “beforeend”

  实例：

  在header元素后插入一个新的<p>元素：

  var h = document.getElementById("myH2");
  h.insertAdjacentHTML("afterend", "<p>My new paragraph</p>");
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  insertAdjacentHTML()	4.0+	1.0+	8.0+	4.0+	7.0+

• 

  语法

  node.insertAdjacentHTML(position, text)
• 

  参数值

  参数	类型	描述
  position	String	必需的。 相对于元素的位置。合法的值： “afterbegin” - 元素开始后（作为第一个孩子） “afterend” - 元素之后 “beforebegin” - 元素之前 “beforeend” - 在元素结束之前（作为最后一个孩子）
  text	String	要插入的文本

• 

  更多例子

  使用“afterbegin”值：

  h.insertAdjacentHTML("afterbegin", "<span style='color:red'>My span</span>");
  

  尝试一下

  使用“beforebegin”值：

  h.insertAdjacentHTML("beforebegin", "<span style='color:red'>My span</span>");
  

  尝试一下

  使用“beforeend”值：

  h.insertAdjacentHTML("beforeend", "<span style='color:red'>My span</span>");
  

  尝试一下