ToB企服应用市场:ToB评测及商务社交产业平台

标题: JS节点操作练习题 [打印本页]
作者: tsx81428    时间: 2024-11-12 21:23
标题: JS节点操作练习题
1、创建添加节点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>01.创建添加节点</title>
  6.   </head>
  7.   <body>
  8.     <!--
  9.        需求1：在段落p的后面添加一个span标签，添加span的文本内容‘我是一个span’
  10.             父节点.appendChild(添加的标签);
  11.        需求2：在段落p的前面添加一个h1标签，添加h1的文本内容，‘我是一个h1’
  12.             父节点.insertBefore(添加的标签, 哪个标签前面)
  13.      -->
  14.     <div id="box">
  15.       <!-- <h1>我是一个h1标签</h1> -->
  16.       <p>段落</p>
  17.       <!-- <span>我是一个span标签</span> -->
  18.     </div>
  19.     <button>添加span</button>
  20.     <button>添加h1</button>
  21.     <script>
  22.       var btns = document.querySelectorAll("button");
  23.       var p = document.querySelector("p");
  24.       var box = document.getElementById("box");
  25.       //需求1
  26.       btns[0].onclick = function () {
  27.         // 1.1 创建节点
  28.         let spanElement = document.createElement("span");
  29.         // console.log(spanElement);
  30.         // 1.2 创建文本内容
  31.         let spanText = document.createTextNode("我是一个span标签");
  32.         // console.log(spanText);
  33.         // 1.3将文本内容放入到span节点里
  34.         spanElement.appendChild(spanText);
  35.         // console.log(spanElement);
  36.         // 1.4追加节点
  37.         box.appendChild(spanElement);
  38.       };
  39.       //需求2
  40.       btns[1].onclick = function () {
  41.         //2.1 创建节点
  42.         let h1Element=document.createElement('h1')
  43.         //2.2 创建h1文本内容
  44.         let h1Text=document.createTextNode('我是一个h1标签')
  45.         //2.3 将h1Test放入到节点内
  46.         h1Element.appendChild(h1Text)
  47.         //2.4 添加节点
  48.         box.insertBefore(h1Element,p)
  49.       };
  50.     </script>
  51.   </body>
  52. </html>
复制代码
2、替换删除节点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>02.替换删除节点</title>
  6.   </head>
  7.   <body>
  8.     <!-- 需求一：点击按钮1，将《金瓶梅》替换为《水浒传》
  9.            需求二：点击按钮2，删除《金瓶梅》
  10.     -->
  11.     <button>按钮1</button>
  12.     <button>按钮2</button>
  13.     <ul>
  14.       <li>《红楼梦》</li>
  15.       <li>《三国演义》</li>
  16.       <li>《西游记》</li>
  17.       <li>《金瓶梅》</li>
  18.     </ul>
  19.     <script>
  20.       var btns = document.querySelectorAll("button");
  21.       var ul = document.querySelector("ul");
  22.       var jpm = ul.children[3];
  23.       // 父节点.replaceChild(新节点，旧节点)
  24.       btns[0].onclick = function () {
  25.         // 创建《水浒传》节点
  26.         let liElement = document.createElement("li");
  27.         let liText = document.createTextNode("《水浒传》");
  28.         liElement.appendChild(liText);
  29.         // 替换节点
  30.         ul.replaceChild(liElement, jpm);
  31.       };
  32.       btns[1].onclick = function () {
  33.         // 删除节点写法一
  34.         // ul.removeChild(jpm)
  35.         // 删除节点写法二
  36.         jpm.parentNode.removeChild(jpm);
  37.       };
  38.     </script>
  39.   </body>
  40. </html>
复制代码
3、克隆节点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>03.克隆节点</title>
  6.     <style>
  7.       #box {
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: red;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <!-- 需求:点击按钮克隆div元素-->
  16.      <!-- node.cloneNode() -->
  17.     <div id="box">
  18.       <span>box盒子</span>
  19.     </div>
  20.     <button>克隆</button>
  21.     <script>
  22.       var box = document.getElementById("box");
  23.       document.querySelector("button").onclick = function () {
  24.         // 克隆节点  //false  只克隆节点  true  克隆节点，克隆内容
  25.        let box2= box.cloneNode(true)
  26.       //  console.log(box2);
  27.         //添加克隆节点
  28.         document.body.appendChild(box2)
  29.       };
  30.     </script>
  31.   </body>
  32. </html>
复制代码
4、创建节点增补方式 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>04.创建节点的另外两种方式</title>
  6.   </head>
  7.   <body>
  8.     <!--
  9.     需求1：获取ul里面的li内容
  10.     需求2:在ul里添加《水浒传》到页面中
  11.          innerHTML、document.write()      
  12.     -->
  13.     <button>获取</button>
  14.     <button>添加</button>
  15.     <ul>
  16.       <li>红楼梦》</li>
  17.     </ul>
  18.     <script>
  19.       var btns = document.querySelectorAll("button");
  20.       var ul = document.querySelector("ul");
  21.       // 需求1
  22.       btns[0].onclick = function () {
  23.         let li = ul.children[0];
  24.         // console.log(li.innerHTML);
  25.         // console.log(li.innerText);
  26.       };
  27.       //需求2
  28.       btns[1].onclick = function () {
  29.         //   第一种写法
  30.         // let liElement = document.createElement("li");
  31.         // let liText = document.createTextNode("《水浒传》");
  32.         // liElement.appendChild(liText);
  33.         // ul.appendChild(liElement);
  34.         // 第二种写法  innerHTML
  35.         // let liElement = document.createElement("li");
  36.         // liElement.innerHTML = "《水浒传》";
  37.         // liElement.innerText = "《水浒传》";
  38.         // ul.appendChild(liElement);
  39.         // 第三种写法 *****
  40.         // let liElement = `<li>《水浒传》</li>`;
  41.         // ul.innerHTML = ul.innerHTML + liElement;
  42.         // 第四种写法  document.write()  
  43.         // let liElement = `<li>《水浒传》</li>`;
  44.         // let bodyElement = document.body.innerHTML + liElement;
  45.         // console.log(bodyElement);
  46.         // document.write(bodyElement);
  47.         // 第五种写法   *****
  48.         let liElement=`<li>《水浒传》</li>`
  49.         ul.insertAdjacentHTML('beforeend',liElement)
  50.       };
  51.     </script>
  52.   </body>
  53. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4