动态添加和移除元素

最新推荐文章于 2024-03-09 14:57:39 发布

原创最新推荐文章于 2024-03-09 14:57:39 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dom #动态添加元素

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

代码示例

11 篇文章

订阅专栏

本文介绍如何使用JavaScript动态地创建和添加DOM元素，并演示了具体的实现方法，包括创建新节点、添加、移除、替换和插入节点等基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加元素是对DOM的基本操作，下面便是简单的元素添加与删除。

(1)创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

(2)添加、移除、替换、插入

appendChild()

removeChild() // 删除一个节点

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

(3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() //通过元素Id，唯一性

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<title>动态</title>
<meta charset="UTF-8">
</head>
<script type="text/javascript">
window.onload=function(){
    var oul=document.getElementById("ul1");  //获取要添加在ul中的id
    document.getElementById("add").onclick=function(){
        var oli=document.createElement("li");  //新建元素的类型
        var ali=oul.getElementsByTagName("li"); //获取原ul中的li
        var otxt=document.getElementById("tet");  //获取文本框的id
        oli.innerHTML=otxt.value; //将文本框中输入的内容动态加在新的元素中
        oli.id="id1";  //给每一个新加的元素加id，以便后来的删除
       if(ali.length==0) 
            oul.appendChild(oli);   //检验，如果原ul中没有元素，则先添加一个
       else
           oul.insertBefore(oli,ali[0]);  //在原li之前添加元素
    } 
   document.getElementById("dele").onclick=function(){
        document.getElementById("id1").parentNode.
        removeChild(document.getElementById("id1"));  //移除添加的元素
   }
}
</script>
<body>
  <input type="text" id="tet" />
  <input type="button" value="增加" id="add" />
  <input type="button" value="删除" id="dele" />
  <ul id="ul1"> 
  </ul>
</body>
</html>