JavaScript中DOM 操作标签内容

最新推荐文章于 2022-11-19 11:02:57 发布

大聪明码农徐

最新推荐文章于 2022-11-19 11:02:57 发布

阅读量275

点赞数 2

分类专栏： JavaScript基础文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_45799465/article/details/122763324

版权

JavaScript基础专栏收录该内容

34 篇文章 18 订阅

订阅专栏

标签对象.innerText

获取和设定时支持解析标签

获取:var 变量 = 标签对象.innerHTML ;

设定:标签对象.innerHTML = 字符串 ;

<body>
    <div>大聪明</div>
<script>
    // 获取标签对象
    var oDiv = document.querySelector("div");
    // 获取标签对象内容
    var str = oDiv.innerHTML;
    console.log(str);
    // 设定标签内容
    oDiv.innerHTML = "<p>码农徐</p>";
    console.log(oDiv);
</script>

运行结果：

标签对象.innerHTML

获取和设定时不支持解析标签只能获取和设定文本内容

获取：var 变量 = 标签对象.innerText ;

设定：标签对象.innerText = 字符串 ;

<body>
<div>大聪明</div>
<script>
    const oDiv = document.querySelector("div");
    var str = oDiv.innerText;
    console.log(str);
    oDiv.innerText += "<p>码农徐</p>";
    console.log(oDiv);
</script>
</body>

运行结果：

注意：

一， +=加等执行的是字符串拼接效果是在原始内容后拼接新内容

二， =等于赋值是覆盖赋值赋值的字符串内容会覆盖原始内容

<script>
    // 获取标签对象
    var oDiv = document.querySelector("div");
    // 赋值操作
    // oDiv.innerHTML = "<p>码农徐</p>";
    // console.log(oDiv);
    // 拼接新内容
    oDiv.innerHTML += "<p>码农徐</p>";
    console.log(oDiv);
</script>

大聪明码农徐

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中DOM 操作标签内容

标签对象.innerText获取和设定时支持解析标签获取:var 变量 = 标签对象.innerHTML ;设定:标签对象.innerHTML = 字符串 ;<body> <div>大聪明</div><script> // 获取标签对象 var oDiv = document.querySelector("div"); // 获取标签对象内容 var str = oDiv.innerHTML;..
复制链接

扫一扫