节点操作:创建和添加节点

武飞扬头像

只通宵不熬夜

2024-04-23 帮助1人

1.创建节点

document.createElement('tagName')

document.createElement() 方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需要动态生成的，所有也称之为动态创建元素节点。

2.添加节点

1.node.appendchild（child）

node.appendchild（）方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。

2.node.insertBefore（child，指定元素）

node.insertBefore（）方法将一个节点添加到父节点的指定节点前面，类似于css里面的before伪元素。

代码入下：

<body>
<ul>
<li>5641</li>
</ul>
<script>
//给ul添加li，如果原来的ul有li，则在后面追加元素
//1.创建元素节点
let li= document.createElement('li');
//2.添加节点 node是父级 child是子级
let ul=document.querySelector('ul');
ul.appendChild(li);
//3.添加节点 node.insertBefore（child，指定元素）;
let lili=document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
//4.在页面添加一个新元素：1.创建元素 2.添加元素
</script>
</body>

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgfabhg

系列文章

同类精品

继续加载