How to add and delete elements in JavaScript-JS Tutorial-php.cn

How to add and delete elements in JavaScript

醉折花枝作酒筹

Release： 2023-01-04 09:35:16

Original

3713 people have browsed it

Methods for adding and deleting elements in JS: 1. Use "appendChild("element name")" to add elements; 2. Use "insertBefore(element name, where to add the element)" to add it anywhere Element; 3. Use "removeChild("Element Name")" to delete the element.

How to add and delete elements in JavaScript

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.

How to add and delete elements in JavaScript

To add an element, you must first create an element. If you want to write in the newly added element To enter text, you need to create a text node, and then insert the value of the text node into the newly added element.

(1) createElement("Element Name"): This method can create a new element. For example: createElement("p") means that a p tag (element/paragraph) is created.

(2) createTextNode("Text Content"): This method can create a text node. For example: createTextNode("I am new content") means that a text node with the value "I am new content" is created.

(3) appendChild("Element Name"): Add a new element. For example: ul.appendChild("li") means adding a li element to ul.

(4) removeChild("Element Name"): Delete an element. The usage is opposite to (3).

The following example dynamically adds the li element to ul, and adds it in front of the original li each time.

<script>
      window.οnlοad=function () {
          var UL=document.getElementsByClassName(&#39;box&#39;)[0];
          var btn=document.getElementsByTagName(&#39;button&#39;);
          var index=1;  //序号计数器
          btn[0].οnclick=function () {    //创建新节点，并添加新元素,新添加的元素总是在最前面
              var li=document.createElement(&#39;li&#39;),  //创建li元素
                  content=&#39;我是第&#39;+index+&#39;个li&#39;;    //li元素的文本节点的内容
              var text=document.createTextNode(content);  //创建li元素的文本节点
              index++;   //每创建一个li计数就+1
              var Li=UL.getElementsByTagName(&#39;li&#39;);    //获取页面中的li集合
              UL.insertBefore(li,Li[0]),li.appendChild(text);  //在页面中第一个li前面添加新的li标签
          }
          btn[1].οnclick=function () {  //删除添加的元素
              var li=document.getElementsByTagName(&#39;li&#39;)[0];
              if(!index%2==0){
                  li.parentNode.removeChild(li);
              }
          }
      }
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body>

Copy after login

Note: If you want each newly added li to be in front of the original li, then you need to use the insertBefore() method.

insertBefore()There are two parameter values in it. The first parameter value is the name of the element you want to add, and the second parameter value is the name of the element where you want to add it ( The value can be null). When it is null, the effect is the same as appendChild().

For example, in the above example, I want the element li added every time to be at the front. Then you only need to change the fourth step:

var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);

Copy after login

That is to say, there are two ways to add a new element: ①appendChild(), ②insertBefore(); delete an element: removeChild()

Recommended learning: javascript video tutorial

The above is the detailed content of How to add and delete elements in JavaScript. For more information, please follow other related articles on the PHP Chinese website!