当前位置:网站首页>DOM — 元素的增删改查
DOM — 元素的增删改查
2022-08-02 14:17:00 【z_小张同学】
1.创建元素:document.createElement()用 此方法创建的元素只保存在内存中,而不会渲染到页面上。
// 创建一个div标签
var box2 = document.createElement("div")
// createElement()括号内填入的是要创建的标签名
2.给标签添加类名:
有两种方法:(1)直接使用 x.className给标签添加
// 创建一个div标签
// createElement()括号内填入的是要创建的标签名
var box2 = document.createElement("div")
// 添加类名
box2.className = "box2"
(2)使用 x.classList.add()方法,此方法的优点是可以多次调用,给元素添加多个类名,并且当多次调用添加的类名相同时,只会添加相同的一个类名
// 创建一个div标签
// createElement()括号内填入的是要创建的标签名
var box2 = document.createElement("div")
// 添加类名,给div设置了两个类名
box2.classList.add("box2")
box2.classList.add("box3")
并且要删除类名时,也可以调用 x.classList.remove()来删除某个类名
// 创建一个div标签
// createElement()括号内填入的是要创建的标签名
var box2 = document.createElement("div")
// 添加类名,给div设置了两个类名
box2.classList.add("box2")
box2.classList.add("box3")
// 删除一个类名
box2.classList.remove("box3")
3. 将创建的元素添加到文档树中,也就是渲染到页面上。
使用 x.appendChild(y) 把y节点对象添加到x节点中
// 获取
var box = document.querySelector("#box")
// 创建一个div标签
// createElement()括号内填入的是要创建的标签名
var box2 = document.createElement("div")
// 添加类名
// box2.className = "box2"
box2.classList.add("box2")
box2.classList.add("box3")
// 删除一个类名
box2.classList.remove("box3")
// 添加到文档树
box.appendChild(box2)
4.删除元素
(1)父元素删除子元素
var box = document.querySelector("#box")
// 1.父元素删除子元素
box.parentElement.removeChild(box)
(2)元素自己移除
var box = document.querySelector("#box")
// 2.自己移除
box.remove()
(3)元素直接全部清空自己
var box = document.querySelector("#box")
// 3.清空自己
box.parentElement.innerHTML = ""
5.克隆: 使用 x.cloneNode() 方法
var box = document.querySelector("#box")
// var box2 = box.cloneNode(true) //参数为true,会连同box的后代元素和所有事件 一起克隆
var box2 = box.cloneNode() //不会克隆事件等
box.appendChild(box2)
6.插入节点: x.insertBefore()
<body>
<div class="box">
<div class="box2">aaa</div>
<div class="box2">bbb</div>
<div class="box2">ccc</div>
<div class="box2">ddd</div>
</div>
<script>
var box = document.querySelector(".box")
var a1 = document.createElement("h1")
a1.innerHTML = 666
// 在box的下标为2的子元素之前添加一个元素
box.insertBefore(a1,box.children[2])
</script>
</body>
边栏推荐
- Oauth2.0 authentication server adds verification code login method
- 【面经】被虐了之后,我翻烂了equals源码,总结如下
- HCIE学习记录——数通网络基础
- Class template/assignment operations and add operations
- WEB自动化之多窗口操作、切换frame、弹窗处理
- WEB自动化之键盘、鼠标操作
- Doubly linked list (normal iterators and const iterators)
- webrtc 中怎么根据 SDP 创建或关联底层的 socket 对象?
- 转行软件测试,从零收入到月薪过万,人生迎来新转折
- Golang基础教程
猜你喜欢
随机推荐
JMM&synchronized&volatile详解
WeTest----如何查看Wetest生成测试报告?
HCIE学习记录——数通网络基础
为什么 RTP 的视频的采样率是 90kHz ?
ssm整合
自动化之参数化
Golang基础教程
小知识系列:Fork之后如何与原仓库分支同步
How to tick the word box?
Priority table and Ascll table
smart rtmpd web 接口说明
Template series-union set
个人成长系列:好问题清单
makefile——rule概览
大厂年薪50w+招聘具有测试平台开发能力的测试工程师
华为Mux VLAN 二层流量隔离
Jenkins 参数化构建(Extended Choice Parameter)
Zabbix: PHP option“date.timezone” Fail
软件测试之WEB自动化
VLAN原理