【JavaScript】添加DOM节点

最新推荐文章于 2024-06-25 19:24:28 发布

HOLD ON!

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量646

点赞数

原文链接：https://blog.csdn.net/lt_future/article/details/88757746

版权

【JavaScript】添加DOM节点
原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏
展开
HTML DOM树

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

查找节点

通过 id 查找 HTML 元素
var x=document.getElementById("dv");
1
通过标签名查找 HTML 元素
var y=document.getElementsByTagName("p")[i];
1
添加节点

1. 创建节点

1>元素节点：var node =document.createElement(“标签名”);

2>文本节点：

   Var textNode=document.createTextNode("文本内容");
   节点.innerHtML="文本内容";//可以识别html
   节点.innerText="文本内容";//非标准，有些浏览器无法识别
1
2
3
3>属性节点：

节点.setAttribute(“属性名”,“属性值”);

1.这是标准的方法，符合xml规范，可以添加任意的属性；
2.节点.属性名=“属性值”，例如aNode.jk=“jk”;//部分浏览器时可以使用

2. 追加节点

a. 追加到尾部：父节点.appendChild(子节点);

b. 插入到中间（插入到某一个元素的前面)：父节点.insertBefore(新元素，旧元素);

demo

<head>
<script type="text/javascript">
   var J = function(id){
       return document.getElementById(id);
   };
   onload = function(){
       var ul=J("ul");
       var li=J("li");
       //创建li标签
       var newLi=document.createElement("li");
       //添加文本内容
       newLi.innerHTML="新的测试数据";

       //插入
       ul.insertBefore(newLi,li);
   };
</script>
</head>
<body id="bd">
<ul id="ul">
   <li>测试数据111</li>
   <li id="li">测试数据222</li>
   <li>测试数据333</li>
</ul>
</body>
1

删除节点

a.父节点.removeChild(子节点) //一般不直接删除，而是隐藏节点

b.节点.style.display=“none” //隐藏节点
————————————————
版权声明：本文为CSDN博主「刘甜-」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lt_future/article/details/88757746