1、创建添加节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>01.创建添加节点</title>
</head>
<body>
<!--
需求1：在段落p的后面添加一个span标签，添加span的文本内容‘我是一个span’
父节点.appendChild(添加的标签);
需求2：在段落p的前面添加一个h1标签，添加h1的文本内容，‘我是一个h1’
父节点.insertBefore(添加的标签, 哪个标签前面)
-->
<div id="box">
<!-- <h1>我是一个h1标签</h1> -->
<p>段落</p>
<!-- <span>我是一个span标签</span> -->
</div>
<button>添加span</button>
<button>添加h1</button>
<script>
var btns = document.querySelectorAll("button");
var p = document.querySelector("p");
var box = document.getElementById("box");
//需求1
btns[0].onclick = function () {
// 1.1 创建节点
let spanElement = document.createElement("span");
// console.log(spanElement);
// 1.2 创建文本内容
let spanText = document.createTextNode("我是一个span标签");
// console.log(spanText);
// 1.3将文本内容放入到span节点里
spanElement.appendChild(spanText);
// console.log(spanElement);
// 1.4追加节点
box.appendChild(spanElement);
};
//需求2
btns[1].onclick = function () {
//2.1 创建节点
let h1Element=document.createElement('h1')
//2.2 创建h1文本内容
let h1Text=document.createTextNode('我是一个h1标签')
//2.3 将h1Test放入到节点内
h1Element.appendChild(h1Text)
//2.4 添加节点
box.insertBefore(h1Element,p)
};
</script>
</body>
</html>
2、替换删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>02.替换删除节点</title>
</head>
<body>
<!-- 需求一：点击按钮1，将《金瓶梅》替换为《水浒传》
需求二：点击按钮2，删除《金瓶梅》
-->
<button>按钮1</button>
<button>按钮2</button>
<ul>
<li>《红楼梦》</li>
<li>《三国演义》</li>
<li>《西游记》</li>
<li>《金瓶梅》</li>
</ul>
<script>
var btns = document.querySelectorAll("button");
var ul = document.querySelector("ul");
var jpm = ul.children[3];
// 父节点.replaceChild(新节点，旧节点)
btns[0].onclick = function () {
// 创建《水浒传》节点
let liElement = document.createElement("li");
let liText = document.createTextNode("《水浒传》");
liElement.appendChild(liText);
// 替换节点
ul.replaceChild(liElement, jpm);
};
btns[1].onclick = function () {
// 删除节点写法一
// ul.removeChild(jpm)
// 删除节点写法二
jpm.parentNode.removeChild(jpm);
};
</script>
</body>
</html>
3、克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>03.克隆节点</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 需求:点击按钮克隆div元素-->
<!-- node.cloneNode() -->
<div id="box">
<span>box盒子</span>
</div>
<button>克隆</button>
<script>
var box = document.getElementById("box");
document.querySelector("button").onclick = function () {
// 克隆节点 //false 只克隆节点 true 克隆节点，克隆内容
let box2= box.cloneNode(true)
// console.log(box2);
//添加克隆节点
document.body.appendChild(box2)
};
</script>
</body>
</html>
4、创建节点补充方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>04.创建节点的另外两种方式</title>
</head>
<body>
<!--
需求1：获取ul里面的li内容
需求2:在ul里添加《水浒传》到页面中
innerHTML、document.write()
-->
<button>获取</button>
<button>添加</button>
<ul>
<li>红楼梦》</li>
</ul>
<script>
var btns = document.querySelectorAll("button");
var ul = document.querySelector("ul");
// 需求1
btns[0].onclick = function () {
let li = ul.children[0];
// console.log(li.innerHTML);
// console.log(li.innerText);
};
//需求2
btns[1].onclick = function () {
// 第一种写法
// let liElement = document.createElement("li");
// let liText = document.createTextNode("《水浒传》");
// liElement.appendChild(liText);
// ul.appendChild(liElement);
// 第二种写法 innerHTML
// let liElement = document.createElement("li");
// liElement.innerHTML = "《水浒传》";
// liElement.innerText = "《水浒传》";
// ul.appendChild(liElement);
// 第三种写法 *****
// let liElement = `<li>《水浒传》</li>`;
// ul.innerHTML = ul.innerHTML + liElement;
// 第四种写法 document.write()
// let liElement = `<li>《水浒传》</li>`;
// let bodyElement = document.body.innerHTML + liElement;
// console.log(bodyElement);
// document.write(bodyElement);
// 第五种写法 *****
let liElement=`<li>《水浒传》</li>`
ul.insertAdjacentHTML('beforeend',liElement)
};
</script>
</body>
</html>