DOM之innerHTML属性

最新推荐文章于 2023-07-12 13:37:38 发布

weixin_46370867

最新推荐文章于 2023-07-12 13:37:38 发布

阅读量171

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46370867/article/details/110370693

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

今天学习了innerHTML属性，希望可以帮助到有需要的小伙伴

innerHTML属性

用法：
可以用来设置或返回表格行的开始标签和结束标签之间的HTML
缺点：
innerHTML属性存在安全问题(innerHTML属性的值不能由用户写)

下面我们向列表中加一个li
实例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性操作</title>
</head>

<body>
    <ul id="city">
        <li>北京</li>
        <li id="tj">天津</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);
        */

        // 元素方式操作
        var city = document.getElementById('city');

        // 获取指定元素的HTML代码
        // city.innerHTML获取到该元素的文本内容
        var html = city.innerHTML;
        console.log(html);
        /*
            <li>北京</li>
            <li id="tj">天津</li>
            <li>南京</li
        */

        // 在原有li的基础上加上新的一个li元素
        html += '<li>重庆</li>';
        city.innerHTML = html;

        

    </script>
</body>

</html>

在这里插入图片描述

weixin_46370867

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM之innerHTML属性

今天学习了innerHTML属性，希望可以帮助到有需要的小伙伴innerHTML属性用法：可以用来设置或返回表格行的开始标签和结束标签之间的HTML缺点：innerHTML属性存在安全问题(innerHTML属性的值不能由用户写)下面我们向列表中加一个li实例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view
复制链接

扫一扫