


The examples in this article summarize the methods of JavaScript node and list operations. Share it with everyone for your reference. The details are as follows:
(1) Create new node
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
(2) Add, remove, replace, insert
appendChild() removeChild() replaceChild() insertBefore()
(3) Search
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id,唯一性
HTML examples to be used in this section
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
1. Create element node
document.createElement() method is used to create elements, accepts one parameter, which is the tag name of the element to be created, and returns the created element node
var div = document.createElement("div"); //创建一个div元素 div.id = "myDiv"; //设置div的id div.className = "box"; //设置div的class
After creating the element, you also need to add the element to the document tree
2. Add element node
appendChild() method is used to add a node to the end of the childNodes list and returns the element node to be added
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML = "项目四"; //向li内添加文本 ul.appendChild(li); //把li 添加到ul子节点的末尾
After adding:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
The appendChild() method can also add an existing element and move the element from its original position to a new position
var ul = document.getElementById("myList"); //获得ul ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
After running (IE):
<ul id="myList"> <li>项目二</li> <li>项目三</li> <li>项目一</li> </ul>
insertBefore() method, if you do not insert the node at the end, but want to place it at a specific position, use this method. This method accepts 2 parameters, the first is the node to be inserted, and the second is the reference Node, returns the element node to be added
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
After adding:
<ul id="myList"> <li>项目四</li> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾
After adding:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前
After adding:
<ul id="myList"> <li>项目一</li> <li>项目四</li> <li>项目二</li> <li>项目三</li> </ul>
3. Remove element node
removeChild() method, used to remove nodes, accepts one parameter, which is the node to be removed, and returns the removed node. Note that the removed node is still in the document, but its position is no longer in the document.
var ul = document.getElementById("myList"); //获得ul var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点 var ul = document.getElementById("myList"); //获得ul var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 ul.removeChild(lis[0]); //移除第一个li,与上面不同,要考虑浏览器之间的差异
4. Replace element node
replaceChild() method, used to replace nodes, accepts two parameters, the first parameter is the node to be inserted, the second parameter is the node to be replaced, and returns the replaced node
var ul = document.getElementById("myList"); //获得ul var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点 var ul = document.getElementById("myList"); //获得ul; var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5. Copy node
cloneNode() method, used to copy nodes, accepts a Boolean parameter, true means deep copy (copy the node and all its child nodes), false means shallow copy (copy the node itself, not copy the child nodes)
var ul = document.getElementById("myList"); //获得ul var deepList = ul.cloneNode(true); //深复制 var shallowList = ul.cloneNode(false); //浅复制
The following is a complete example of creating a list project using JavaScript and copying child nodes:
This JavaScript code displays and creates list items, copies child nodes, and copies node trees. It is a very useful example, especially useful when creating tree menus.
The operation effect is as shown below:
The specific code is as follows:
<html> <head> <title>建立列表项目</title> <script language="JavaScript"> function printChilds(objNode) { var strMsg = "节点名称 =" + objNode.nodeName + "\n"; if (objNode.hasChildNodes()){ var nodeCount = objNode.childNodes.length; strMsg += "子节点数 = " + objNode.childNodes.length + "\n"; for(var i = 0; i < nodeCount; i++) strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n"; alert(strMsg); } } function copyNode(objNode, objDupNode, deep){ var tempNode = objDupNode.cloneNode(deep); objNode.appendChild(tempNode); } </script> </haed> <body id="myBody"> <h2 id="建立列表项目">建立列表项目</h2> <hr> <ul id="myUL"> <li>项目1 <li>项目2 <ol id="myOL"> <li>次项目1 <li>次项目2 </ol> <li>项目3 </ul> <form> <input type="button" value="显示列表的子节点" onclick="printChilds(myUL)"> <input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)"> <input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)"> </form> </body> </html>
I hope this article will be helpful to everyone’s JavaScript programming design.

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version
God-level code editing software (SublimeText3)

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Notepad++7.3.1
Easy-to-use and free code editor

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
