JavaScript node operation - adding nodes

Table of contents

Node operations in JavaScript are divided into four types: adding, deleting, modifying, and checking (obtaining).

We use cases directly to learn:

HTML layout code:

JavaScript code implementation:

Step 1: Get all the element objects to be used (you can use id, class, name, and tags to get them).

The second step: event operation (click event, double-click event, mouse move event, move out event, etc.)

The third step: in the click event, the operation to be done.

In the click event, we do the core code of JavaScript - adding nodes.

The final effect is this:

Node operations in JavaScript are divided into four types: adding, deleting, modifying, and checking (obtaining).

Today we summarize the creation and addition of nodes in JavaScript.

I will update it later, using JavaScript node operations to make a simple message board! ! !

We use cases directly to learn:

Case analysis: Enter text in the input box, click the Add button, put the entered text in the li tag and add it to the ul tag.

Case effect: make use of input input box, button button and ul li list . Which only use HTML layout and JS script.

HTML layout code:

<body>

    <input type="text" placeholder="请输入添加的水果名" id="fruits"> 
    <button id="btn">添加</button>
    <ul id="ul">
        <li>苹果</li>
        <li>香蕉</li>
        <li>鸭梨</li>
    </ul>

</body>

Note: Because our JavaScript will use the id to get the element later, so give the id name in advance.

JavaScript code implementation:

Step 1: Get all the element objects to be used (you can use id, class, name, and tags to get them).

The text in the input box needs to be used, so get the input input box.

var fruits = document.getElementById("fruits");

button The button we want to click, so get the button button.

var btn = document.getElementById("btn");

We want to insert a new element li in the ul list so get the ul list.

var ul = document.getElementById("ul");

The second step: event operation (click event, double-click event, mouse move event, move out event, etc.)

The case uses the event that we want to use the mouse click button, so add a click event to the obtained button.

 btn.onclick = function(){   
  
    //执行的语法

 }

The third step: in the click event, the operation to be done.

In the click event, we do the core code of JavaScript - adding nodes.

1. Create a li element node.

//语法：var 变量名 = document.createElement("创建的标签名")
var li = document.createElement("li");

2. Create a text node (the content of the text node is the content in the input input box).

// 语法： var 变量名 = document.createTextNode("文本的内容")
var text = document.createTextNode(fruits.value);

3. Add the content of the created text to the created label.

// 语法：创建的元素节点 .appendChild (创建的文本节点)
li.appendChild(text);

4. Add the created element node to the corresponding position of HTML. Note: Here is to add the created li element node to the ul in the HTML tag. ul and li are a parent-child relationship, so we need to use appendChild to add.

//语法： 父级标签 .appendChild(创建的子级标签)
 ul.appendChild(li);

The ul here is because the ul tag was obtained in the first step, so it can be used directly.