element.innerHTML
Element.innerHTML属性设置或获取HTML语法表示的元素的后代。
替换元素的内容
设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。
如下代码举例了为
元素添加新的
元素的操作方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML 属性</title> </head> <body> <ul id="city"> <li>邯郸</li> <li id="bd">保定</li> <li>邢台</li> </ul> <script> // 为<ul>元素添加新的<li>元素 // 节点方式操作 /*var newLi = document.createElement('li'); var textNode = document.createTextNode('石家庄'); newLi.appendChild(textNode); var city = document.getElementById('city'); city.appendChild(newLi);*/ // innerHTML方式操作 var city =document.getElementById('city'); var html = city.innerHTML;//获取指定元素的HTML代码 console.log(html); html += '<li>石家庄</li>'; city.innerHTML = html; </script> </body> </html>
效果图如下：
通过 city.innerHTML = html 为列表新增一列。
但是有一件非常重要的事情，就是该属性存在安全问题。
innerHTML属性的问题：安全问题（innerHTML属性的值不能由用户编写）。
用 innerHTML 插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介，从而产生潜在的安全风险问题。当插入纯文本时，建议不要使用 innerHTML 。
