1.3 KiB
1.3 KiB
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攻击的最常见方式之一。如果您想学习更多知识并学会防范它, 请查看此资源