How to dynamically create and delete elements in javascript

Home

Web Front-end

JS Tutorial

How to dynamically create and delete elements in javascript_javascript skills

May 16, 2016 pm 04:25 PM

javascript element create delete dynamic method

The example in this article describes the method of dynamically creating and deleting elements in javascript. Share it with everyone for your reference. The specific analysis is as follows:

In DOM, we can dynamically delete and delete dom elements easily and quickly. Here we will give you a brief introduction.

Example 1:

Dynamicly create a button

Copy code The code is as follows:

<html> 

<head> 

<title>Dynamically created button</title> 

<script language="javascript"> 

var a,b,ab,ba,c;

function createInputA(){

a = document.createElement("input"); //Use the DOM element creation method 

a.type = "button" ; //Set the type of element

a.value = "Button A"; //Set the value of the element 

a.attachEvent("onclick",addInputB); //Add events to the control

document.body.appendChild(a); //Add controls to the form

//a = null; //Release the object

}

Example 2:

Copy code The code is as follows:

<html>

<head>

<script type="text/javascript">

function test(){ 

​​​​ //createElement() Create an element with a specified tag name [for example: dynamically create a hyperlink]

      var createa=document.createElement("a");

         createa.id="a1";

          createa.innerText="Connect to Baidu";

        createa.href="http://www.jb51.net";

//createa.color="green" ////Add color (don’t forget the style attribute, otherwise it will have no effect)

         createa.style.color="green"

//Add the default position --body and add child nodes 

​​​​ //document.body.appendChild(createa);

//Place the specified location

          document.getElementById("div1").appendChild(createa);

}

Function test2(){

//Delete the node at the specified location removeChild()

          document.getElementById("div1").removeChild(document.getElementById("a1")); //If the id name is repeated, js only takes the first one 

}

</script>

</head>

<body>

<!--Dynamicly create elements-->

<input type="button" value="Create a tag" onclick="test()"/><br/>

<input type="button" value="Delete Create a tag" onclick="test2()"/>

<div id="div1" style="width:400px;height:300px;border:1px solid silver">

</div>

</body>

</html>

Dynamicly create multiple forms:

Copy code The code is as follows:

<html>

 <head>

  <script type="text/javascript">

   window.onload = function() {

    var aBtn = document.createElement("input");

    var bBtn = document.createElement("input");

    var cBtn = document.createElement("input");

    aBtn.type = "button";

    aBtn.value = "按钮A";

    aBtn.onclick = copyBtn;

    bBtn.type = "button";

    bBtn.value = "按钮B";

    bBtn.onclick = copyBtn;

    cBtn.type = "button";

    cBtn.value = "按钮C";

    cBtn.onclick = clearCopyBtn;

    document.body.appendChild(aBtn);

    document.body.appendChild(bBtn);

    document.body.appendChild(cBtn);

   };

   function copyBtn() {

    var btn = document.createElement("input");

    btn.type = "button";

    btn.value = this.value;

    btn.isCopy = true;

    btn.onclick = copyBtn;

    document.body.appendChild(btn);

   }

   function clearCopyBtn() {

    var btns = document.getElementsByTagName("input");

    var length = btns.length;

    for (var i = length - 1; i >= 0; i--) {

     if (btns[i].isCopy) {

      document.body.removeChild(btns[i]);

     }

    }

   }

  </script>

 </head>

 <body>

 </body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn