Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erklärung, wie JavaScript Dom-Elementcode schnell und dynamisch löschen und löschen kann

伊谢尔伦
Freigeben: 2017-07-21 09:50:13
Original
2914 Leute haben es durchsucht

In DOM können wir Dom-Elemente einfach und schnell dynamisch löschen und löschen

Beispiel 1:

Dynamisch eine Schaltfläche erstellen

<html> 
<head> 
<title>动态创建按钮</title> 
<script language="javascript"> 
var a,b,ab,ba,c;
function createInputA(){
a = document.createElement("input");  //使用DOM的创建元素方法
a.type = "button" ;                       //设置元素的类型
a.value = "按钮A";                     //设置元素的值
a.attachEvent("onclick",addInputB);    //为控件添加事件
document.body.appendChild(a);             //添加控件到窗体中
//a = null;              //释放对象
}
Nach dem Login kopieren

Beispiel 2:

<html>
<head>
<script type="text/javascript">
    function test(){        
        //createElement()  创建一个指定标签名的元素[比如:动态创建超链接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="连接到百度";
        createa.href="http://www.jb51.net";
        //createa.color="green" ////添加颜色(不要忘记style属性,不然没有效果)
        createa.style.color="green"
        //添加默认位置--body 并且添加子节点
        //document.body.appendChild(createa);
        //放置指定位置
        document.getElementById("p1").appendChild(createa);
    }
    
    function test2(){
        //指定位置删除节点removeChild()
        document.getElementById("p1").removeChild(document.getElementById("a1")); //id 名重复 js只取第一个
    }
</script>
</head>
<body>
<!--动态创建元素-->
<input type="button" value="创建一个a标签" onclick="test()"/><br/>
<input type="button" value="删除创建一个a标签" onclick="test2()"/>
<p id="p1" style="width:400px;height:300px;border:1px solid silver">
</p>
</body>
</html>
Nach dem Login kopieren

Mehrere Formulare dynamisch erstellen:

<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>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie JavaScript Dom-Elementcode schnell und dynamisch löschen und löschen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage