JS节点操作练习题

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");//需求1btns[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);};//需求2btns[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");// 需求1btns[0].onclick = function () {let li = ul.children[0];// console.log(li.innerHTML);// console.log(li.innerText);};//需求2btns[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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/13615.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！