更新删除DOM节点（重要）

更新节点

 

 

 属性用字符串包

id1.innerText= ’123‘ ；  //修改文本值

id1.innerHTML='<strong>123</strong>'   //可以解析html文本标签，加粗

id1.style.color='red'   //可以操作css

id1.style.fontSize="39px";    //fontSize驼峰命名

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="id1">
 9 
10 </div>
11 <script>
12     var id1 = document.getElementById("id1");
13     id1.innerText = 'abc';
14     
15 </script>
16 </body>
17 </html>
复制代码

 

 

删除节点

　　删除节点步骤：先获取父节点，再通过父节点删除自己

 

　　father.removeChild(p1);

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="father">
 9     <h1>标题</h1>
10     <p id="p1">p1</p>
11     <p class="p2">p2</p>
12 </div>
13 
14 
15 
16 <script>
17 
18     var self = document.getElementById("p1");
19     var father = p1.parentElement;
20     father.removeChild(self);
21 
22     //删除是一个动态的过程
23     father.removeChild(father.children[0]);
24     father.removeChild(father.children[1]);
25     father.removeChild(father.children[2]);//这种删除第一个元素后 索引改变 后面会报错
26 </script>
27 
28 </body>
29 
30 
31 </html>
复制代码

 

　　

　　

 

posted @   doremi429  阅读(64)  评论(0)  编辑  收藏  举报
相关博文：
·  获得DOM节点（重点）
·  创建和插入DOM节点
·  更新和删除DOM节点
·  删除DOM节点
·  19.删除DOM节点
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手