Small knowledge, big challenge! This article is participating in the creation activity of “Essentials for Programmers”. This article has participated in the “Digitalstar Project” to win the creation gift package and challenge the creation incentive money.

In order to thank the nuggets readers for their support during this period of time, I put a private wechat on the homepage. If you need technical communication, you can directly add A Ken to communicate with me on wechat. Thank you for meeting me

Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).

This blog is suitable for just contactJSAnd the friends who want to review after a long time.

🌊🌈

7.5.2_ Adding and Deleting Nodes

In the DOM, methods node.appendChild() and Node.insertbefore () are provided to add nodes, and Node.removechild (child) to remove nodes. Next, we will explain the use of the above three methods.

1. appendChild()

The appendChild() method adds a node to the end of the list of children of the specified parent node, similar to the after pseudo-element in CSS.

2. insertBefore()

The insertBefore (Child, specifying element) method adds a node to the specified child of the parent node, similar to the before pseudo-element in CSS.

3. removeChild(child)

RemoveChild (child) removes a child node from the DOM and returns the deleted node.

7.5.3_[Case] Simple Message board

Example: a simple message board function will be completed using the knowledge of node creation, addition and deletion. Click “Publish” on the page to dynamically create a LI and add it to ul. The specific implementation steps are as follows.

(1) Write HTML pages.

<! DOCTYPEHTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<textarea name="" id=""></textarea>
		<button>release</button>
		<ul>
			</u1>
	</body>
</html>
Copy the code

In the above code, a textarea multi-line text entry box is defined. For users to enter messages. Button Click to publish a message. Ul Displays the message module.

(2) Click Publish to add a message.

<script>
// 1. Get the element
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. Register events
btn.onclick = function() {
if (text.value = "") {
alert('You have no input');
return false;
} else {
// (1) Create element
var li = document.createElement('li');
li.innerHTML = text.value;
// (2) Add elements
ul.insertBefore(li, ul.children[0]); }}; </script>Copy the code

Line 7 of the above code adds a click event to the button button to add a message. Lines 8 to 11 use the if condition statement to judge, if the user input is empty, to remind the user to enter, otherwise execute the else code block. Lines 13 and 14 create element li and assign a value to the created element li. Line 16 puts the created Li before the first element.

(3) Modify the above code to achieve the function of deleting messages.

In order to delete messages, first of all, after adding Li, we need to add a link to Li, register click events for all a links, find the parent node li of A, and delete it.

Modify line 14 in step (2) to the following code.

li.innerHIML = text.value + ' delete < / a > ';
Copy the code

Add the delete message code after step (2), line 16, as shown below.

var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode);
};
}
Copy the code

In the above code, line 1 retrieves all the A elements. Line 2 registers click events for element A using a for loop. Line 4 uses the node.removechild (child) method to remove the li where a is currently located.

7.5.4_ Copy node node.clonenode () method

In the DOM, the node.clonenode () method is provided, which returns a copy of the node on which the method was called, also known as a clone or copy node. The syntax is “nodes that need to be copied. CloneChild (true/false)”. If the parameter is null or false, it is a shallow copy, that is, only the node itself is copied, not the child nodes within it. If the parenthesis argument is true, it is a deep copy, which copies the node itself and all its children. The sample code is as follows.

<body>
<ul id="myList"><li>apple</li><li>The oranges</li><li>orange</li></u1>
<ul id="op"></ul>
<button onclick="myFunction()">Am I</button>
<script>
function myFunction() {
var item = document.getElementById('mylist').firstChild;
var cloneItem = item.cloneNode (true);
document.getElementById('op').appendChild(cloneItem);
</script>
</body>
Copy the code

In the above code, myFunction() is triggered when the “click me” button is clicked, and line 7 fetches the first element in the myList. Line 8 calls the cloneNode(true) method to copy the item fetched on line 7. Line 9 gets the element with id op and adds the copied cloneItem node to the element with id op using the appendChild() method.

CloneNode (true) flse = flse

As a result, only one empty li element is copied when the argument is false.

🌊🌈

A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology

Suggest collection 】 【 HTML dry share | challenge the shortest possible time to take you into the HTML (18) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (19) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (20)

Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (17) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (18) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (19)

🌊🌈 About postscript:

Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice

Original is not easy, “like” + “attention” thanks for your support ❤