Web Front-end
JS Tutorial
Detailed explanation of how to create, use and delete dom node instances in JavaScript
Detailed explanation of how to create, use and delete dom node instances in JavaScript
Create node
In order to create a new node, you can use createElement and createTextNode. If the new creation is completed, you can use appendChild() to add the node to the DOM tree.
Create an element P and set the innerHTML attribute
var myp = document.createElement('p'); myp.innerHTML = 'yet another';
After the element P is created, you can modify and add attributes at will
myp.style.border = '2px dotted blue'
Next, you can use appendChild to add new nodes to the DOM tree.
document.body.appendChild(myp)
Methods of using DOM
It is indeed very simple to use the innerHTML method. We can use the pure dom method to achieve the above functions.
Create a new text node (yet another)
Create a new paragraph
Place the text node Add to paragraph.
Add paragraphs to body
// 创建p var myp = document.createElement('p'); // 创建一个文本节点 var myt = document.createTextNode('one more paragraph') myp.appendChild(myt); // 创建一个STRONG元素 var str = document.createElement('strong'); str.appendChild(document.createTextNode('bold')); // 把STRONG元素添加到P中 myp.appendChild(str); // 把P元素添加到BODY中 document.body.appendChild(myp); //结果<p>one more paragraph<strong>bold</strong></p> cloneNode()
Another way to create a new node is, we You can use cloneNode to copy a node. cloneNode() can pass in a boolean parameter. If true, it means a deep copy, including its child nodes, if false, it only copies itself.
First get the element to be copied.
var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>
No need to make a deep copy first.
document.body.appendChild(el.cloneNode(false))
We found that the page did not change, because only the element p was copied. The same effect as below.
document.body.appendChild(document.createElement('p'));
If deep copy is used, all child nodes including p below will be copied. Including text nodes and EM elements of course.
document.body.appendChild(el.cloneNode(true))
insertBefore()
Using appendChild is to add the element to the end. The insertBefore method can more precisely control the position of inserted elements.
elementNode.insertBefore(new_node,existing_node)
Example
document.body.insertBefore( document.createTextNode('boo!'), document.body.firstChild );
It means to create a new text node and use it as the first node of the body element .
Delete Node
To delete a node from the DOM tree, we can use removeChild(). Let’s take a look at the HTML to be operated
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
Let’s take a look at the following code. Delete the second paragraph
var myp = document.getElementsByTagName('p')[1]; var removed = document.body.removeChild(myp);
The removed node is the deleted node. The deleted node can still be used in the future.
We can also use the replaceChild() method. This method is to delete a node and replace it with another node. After performing the last node deletion operation, the result is as follows
<body> <p class="opener">first paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
Let’s take a look at the use of replaceChild. We replace the second p
var replaced = document.body.replaceChild(removed, p);
with the last deleted node, which is the same as removeChild returns. Replaced is the removed node. Now the result is
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <!-- and that's about it --> </body>
The above is the detailed content of Detailed explanation of how to create, use and delete dom node instances in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1384
52
How to delete Xiaohongshu notes
Mar 21, 2024 pm 08:12 PM
How to delete Xiaohongshu notes? Notes can be edited in the Xiaohongshu APP. Most users don’t know how to delete Xiaohongshu notes. Next, the editor brings users pictures and texts on how to delete Xiaohongshu notes. Tutorial, interested users come and take a look! Xiaohongshu usage tutorial How to delete Xiaohongshu notes 1. First open the Xiaohongshu APP and enter the main page, select [Me] in the lower right corner to enter the special area; 2. Then in the My area, click on the note page shown in the picture below , select the note you want to delete; 3. Enter the note page, click [three dots] in the upper right corner; 4. Finally, the function bar will expand at the bottom, click [Delete] to complete.
Is it true that you can be blocked and deleted on WeChat and permanently unable to be added?
Apr 08, 2024 am 11:41 AM
1. First of all, it is false to block and delete someone permanently and not add them permanently. If you want to add the other party after you have blocked them and deleted them, you only need the other party's consent. 2. If a user blocks someone, the other party will not be able to send messages to the user, view the user's circle of friends, or make calls with the user. 3. Blocking does not mean deleting the other party from the user's WeChat contact list. 4. If the user deletes the other party from the user's WeChat contact list after blocking them, there is no way to recover after deletion. 5. If the user wants to add the other party as a friend again, the other party needs to agree and add the user again.
What folder is found.000? Can the found.000 folder be deleted?
Mar 13, 2024 pm 08:52 PM
In the process of daily use of the computer, you may receive an error message that the found.000 file is lost and damaged. What folder is this found.000? Can it be deleted if it is no longer useful? Since so many people do not know this file, let me tell you about the found.000 folder in detail~ 1. What is the found.000 folder? When the computer is partially or completely lost due to illegal shutdown, , you can find the special folder named "found.000" and the files with the ".chk" extension contained inside it in the specified directory located in the system partition. This "fo
How to delete Xiaohongshu releases? How to recover after deletion?
Mar 21, 2024 pm 05:10 PM
As a popular social e-commerce platform, Xiaohongshu has attracted a large number of users to share their daily life and shopping experiences. Sometimes we may inadvertently publish some inappropriate content, which needs to be deleted in time to better maintain our personal image or comply with platform regulations. 1. How to delete Xiaohongshu releases? 1. Log in to your Xiaohongshu account and enter your personal homepage. 2. At the bottom of the personal homepage, find the "My Creations" option and click to enter. 3. On the "My Creations" page, you can see all published content, including notes, videos, etc. 4. Find the content that needs to be deleted and click the "..." button on the right. 5. In the pop-up menu, select the "Delete" option. 6. After confirming the deletion, the content will disappear from your personal homepage and public page.
What is hiberfil.sys file? Can hiberfil.sys be deleted?
Mar 15, 2024 am 09:49 AM
Recently, many netizens have asked the editor, what is the file hiberfil.sys? Can hiberfil.sys take up a lot of C drive space and be deleted? The editor can tell you that the hiberfil.sys file can be deleted. Let’s take a look at the details below. hiberfil.sys is a hidden file in the Windows system and also a system hibernation file. It is usually stored in the root directory of the C drive, and its size is equivalent to the size of the system's installed memory. This file is used when the computer is hibernated and contains the memory data of the current system so that it can be quickly restored to the previous state during recovery. Since its size is equal to the memory capacity, it may take up a larger amount of hard drive space. hiber
How to completely delete TikTok chat history
May 07, 2024 am 11:14 AM
1. Open the Douyin app, click [Message] at the bottom of the interface, and click the chat conversation entry that needs to be deleted. 2. Long press any chat record, click [Multiple Select], and check the chat records you want to delete. 3. Click the [Delete] button in the lower right corner and select [Confirm deletion] in the pop-up window to permanently delete these records.
How to completely delete WeChat File Transfer Assistant_Introduction to how to close WeChat File Transfer Assistant
Mar 20, 2024 pm 08:31 PM
WeChat's file transfer assistant is available to every user. Some users use it as a memo to record some things. So how to completely delete WeChat File Transfer Assistant? Let me introduce it to you in detail below. How to completely delete WeChat File Transfer Assistant? Answer: [WeChat]-[Long press File Transfer Assistant]-[Delete this chat]. Specific steps: 1. First open the WeChat software. After entering the home page, we find [File Transfer Assistant] and press and hold; 2. Then a pop-up will be marked as unread, pin the chat to the top, do not display the chat, and delete the chat. Here We can click [Delete this chat];
How to send files to others on TikTok? How to delete files sent to others?
Mar 22, 2024 am 08:30 AM
On Douyin, users can not only share their life details and talents, but also interact with other users. In this process, sometimes we need to send files to other users, such as pictures, videos, etc. So, how to send files to others on Douyin? 1. How to send files to others on Douyin? 1. Open Douyin and enter the chat interface where you want to send files. 2. Click the "+" sign in the chat interface and select "File". 3. In the file options, you can choose to send pictures, videos, audio and other files. After selecting the file you want to send, click "Send". 4. Wait for the other party to accept your file. Once the other party accepts it, the file will be transferred successfully. 2. How to delete files sent to others on Douyin? 1. Open Douyin and enter the text you sent.
