0
点赞
收藏
分享

微信扫一扫

JavaScript-元素增删改查

创建节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>

<script>
let oSpan = document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);
</script>
</body>
</html>

添加节点

注意点:​​appendChild​​ 方法会将指定的元素添加到最后:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div></div>

<script>
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");

oDiv.appendChild(oSpan)

let oA = document.createElement("a");
oDiv.appendChild(oA);
</script>
</body>
</html>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>

<script>
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");

oDiv.insertBefore(oSpan, oH1);
oDiv.insertBefore(oSpan, oP);
</script>
</body>
</html>

删除节点

注意点:在 ​​js​​​ 中如果想要删除某一个元素, 只能通过对应的 ​​父元素​​ 来删除,元素是不能够自杀的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>

<script>
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oP = document.querySelector("p");

oDiv.insertBefore(oSpan, oP);

console.log(oSpan.parentNode);

oSpan.parentNode.removeChild(oSpan);
oDiv.parentNode.removeChild(oDiv);
</script>
</body>
</html>

克隆节点

注意点:​​cloneNode​​​ 方法默认不会克隆子元素, 如果想克隆子元素需要传递一个 ​​true​​:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>

<script>
let oDiv = document.querySelector("div");

let newDiv1 = oDiv.cloneNode();
console.log(newDiv1);

let newDiv2 = oDiv.cloneNode(true);
console.log(newDiv2);
</script>
</body>
</html>

JavaScript-元素增删改查_删除节点

JavaScript-元素增删改查_html_02




举报

相关推荐

0 条评论