element.innerHTML一个不起眼的属性，我对他它又重新认识了一遍

最新推荐文章于 2022-11-20 15:21:11 发布

不苒

最新推荐文章于 2022-11-20 15:21:11 发布

阅读量2.1k

点赞数

分类专栏： js面向对象随笔文章标签： javascript

本文链接：https://blog.csdn.net/qq_49002903/article/details/109460616

版权

js面向对象随笔专栏收录该内容

9 篇文章 2 订阅

订阅专栏

`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 。

不苒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
element.innerHTML一个不起眼的属性，我对他它又重新认识了一遍

element.innerHTMLElement.innerHTML属性设置或获取HTML语法表示的元素的后代。替换元素的内容设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。如下代码举例了为元素添加新的元素的操作方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>innerHTML 属性</tit
复制链接

扫一扫