动态添加和移除元素

最新推荐文章于 2022-11-15 10:41:22 发布

黛梨

最新推荐文章于 2022-11-15 10:41:22 发布

阅读量935

点赞数 1

分类专栏： javascript 代码示例文章标签： dom 动态添加元素

本文链接：https://blog.csdn.net/pedrojuliet/article/details/52073976

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

代码示例

11 篇文章 0 订阅

订阅专栏

动态添加元素是对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.οnlοad=function(){
    var oul=document.getElementById("ul1");  //获取要添加在ul中的id
    document.getElementById("add").οnclick=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").οnclick=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>

黛梨

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态添加和移除元素

动态添加元素是对DOM的基本操作，下面便是简单的元素添加与删除。1.创建DOM元素createElement（标签名），作用：创建一个节点父节点 . appendChild（新节点），作用：在父亲div中追加一个节点2.插入元素insertBefore（新节点，原有节点），在已有的元素前面插入新节点3.删除元素removeChild（节点），作用：删除一个节点代码
复制链接

扫一扫