innerHTML prop返回所选元素中的HTML内容，并允许您定义新的HTML内容。

获取元素内容

<div id="demo">
  <p>Demo</p>
 </div>

var element = document.getElementById("demo");
 console.log(element.innerHTML) //logs <p>Demo</p>

设置元素内容

<div id="demo"></div>

var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";

HTML现在就像

<div id="demo">
  <div>Demo</div>
</div>

安全考虑

设置为innerHTML的值应该来自可靠来源，因为Javascript会将任何内容放在该元素中，并且它将作为纯HTML运行。

例：

设置“ <script>alert();</script> ”值将导致Javascript“alert（）”函数被触发：

var element = document.getElementById("demo");
element.innerHTML = "<script>alert();</script>";

HTML Dom Innerhtml属性

更多JavaScript教程