JS元素节点的属性之修改元素内容

最新推荐文章于 2022-07-12 17:43:08 发布

东方求败、

最新推荐文章于 2022-07-12 17:43:08 发布

阅读量506

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： html html5 javascript

本文链接：https://blog.csdn.net/wang_swa99er/article/details/119955537

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

JS元素节点的属性之修改元素内容

1.innerHTML 获取标签间内容，会解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         window.onload = function(){
             var oDiv = document.getElementById("div1");
             alert(oDiv.innerHTML);
             oDiv.innerHTML = "<h1>Hello World</h1>";
         }
    </script>
</head>
<body>
    <div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
</body>
</html>

运行结果：
在这里插入图片描述

2.innerText 获取标签间纯文本，不会解析标签，设置纯文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         window.onload = function(){
             var oDiv = document.getElementById("div1");
             alert(oDiv.innerText);
             oDiv.innerText = "<h1>Hello World</h1>";
         }
    </script>
</head>
<body>
    <div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
</body>
</html>

运行结果：
在这里插入图片描述

3.outerHTML 从外标签开始到外标签结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         window.onload = function(){
             var oDiv = document.getElementById("div1");
             alert(oDiv.outerHTML);
             oDiv.outerHTML = "<h1>Hello World</h1>";
         }
    </script>
</head>
<body>
    <div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
</body>
</html>

运行结果：
在这里插入图片描述

东方求败、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS元素节点的属性之修改元素内容

JS元素节点的属性之修改元素内容1.innerHTML 获取标签间内容，会解析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫