javascript's method of dynamically creating and deleting elements

2020-05-09 18:05:43
OfStack

This example demonstrates how javascript creates and deletes elements dynamically. Share with you for your reference. The specific analysis is as follows:

In DOM, we can conveniently and quickly delete and delete dom elements dynamically, here we will give friends a simple introduction 1.

Case 1:

Create 1 button dynamically

<html> 

<head> 

<title> Dynamic create button </title> 

<script language="javascript"> 

var a,b,ab,ba,c;

function createInputA(){

a = document.createElement("input");  // use DOM Create the element method 

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

a.value = " button A";                     // Sets 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 object 

}

Example 2:

<html>

<head>

<script type="text/javascript">

    function test(){        

        //createElement()   create 1 The element that specifies the tag name [ Such as : Create hyperlinks on the fly ]

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

        createa.id="a1";

        createa.innerText=" Connect to baidu ";

        createa.href="//www.ofstack.com";

        //createa.color="green" //// Adding color ( Don't forget style Property, otherwise no effect )

        createa.style.color="green"

        // Add default location --body  And add child nodes 

        //document.body.appendChild(createa);

        // Position specified 

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

    }

    

    function test2(){

        // Specify the location to delete the node removeChild()

        document.getElementById("div1").removeChild(document.getElementById("a1")); //id  A repeated  js Just take the first 1 a 

    }

</script>

</head>

<body>

<!-- Dynamically creating elements -->

<input type="button" value=" create 1 a a The label " onclick="test()"/><br/>

<input type="button" value=" Delete create 1 a a The label " onclick="test2()"/>

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

</div>

</body>

</html>

Create multiple forms dynamically:

<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 = " button A";

    aBtn.onclick = copyBtn;

    

    bBtn.type = "button";

    bBtn.value = " button B";

    bBtn.onclick = copyBtn;

    

    cBtn.type = "button";

    cBtn.value = " button 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>

I hope this article has helped you with your javascript programming.