freeCodeCamp/guide/chinese/javascript/html-dom-innerhtml-property/index.md

title, localeTitle

title	localeTitle
HTML Dom Innerhtml Property	HTML Dom Innerhtml属性

HTML Dom Innerhtml属性

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>"; 

这种类型的攻击称为Cross Site Scripting，简称XSS 。

这是提交XSS攻击的最常见方式之一。如果您想学习更多知识并学会防范它， 请查看此资源