DOM-添加元素、节点

2019/03/27 13:42
阅读数 9

createElement()方法能够根据参数指定的标签名称创建一个新元素,并返回新建元素的引用,用法如下

var element=document.createElement("tagName");

其中element表示新建元素的引用,createElement()是document对象的一个方法,该方法只有一个参数,用来指定创建元素的标签名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大,无奇不有</p>
<ul>

</ul>
<script>
var element=document.createElement("p");    
var b=element.nodeName;
var v=element.nodeType;
document.body.appendChild(element);     //添加到body 子节点下
element.innerHTML="我也想去看看";       //给元素加上内容

alert(b+v);

</script>
</body>
</html>

使用createElement()方法创建的新元素不会被自动添加到文档中,因为新元素还没有nodeParent属性,仅在javascript上下文中有效,如果要把这个元素添加到文档中,还需要使用appendChild()、insertBefore()或replaceChild()方法实现。

复制节点

  cloneNode()方法可以创建一个节点的副本,其用法如下

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大,无奇不有</p>
<ul>

</ul>
<script>
  var p=document.createElement("p");            //创建p元素
  var h1=document.createElement("h1");        //创建h1元素
  var txt=document.createTextNode("你好,世界");     //创建文本节点
  var hello=txt.cloneNode(false);             //复制创建的文本节点
  p.appendChild(hello);                   //把复制的文本节点添加到段落中
  h1.appendChild(p);                  //把段落节点增加到h1标题中
  document.body.appendChild(h1);        //把标题节点增加到body中
</script>
</body>
</html>

由于赋值节点会包含节点的所有特性,如果原节点中包含ID属性,就会出现id属性重叠情况,一般情况下,在同一个文档中,不同呀U尿素的id属性值应该不同,为了避免

潜在冲突,应修改其中某个节点id属性值。

插入节点

  1.appendChild()方法

    appendChild()方法可向当前节点的子节点列表的末尾添加新的子节点,用法如下

    appendChild(newChild);

    参数newchild表示新添加的节点对象,并返回新节点。

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大,无奇不有</p>
<ul>

</ul>
<script>  
var p=document.createElement("p");                  //创建段落元素
var txt=document.createTextNode("你好世界,世界你好");        //创建文本节点
p.appendChild(txt);       //把文本节点添加到段落节点中
document.body.appendChild(p);       //把段落节点添加到body节点的末尾处
</script>
</body>
</html>

 

2.insertBefore()方法

可在已有的子节点前插入一个新的子节点,用法如下

insertBefore(newchild,refchild);

其中参数newchiild表示插入新的节点,refchild表示在此节点前插入新的子节点,返回新的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大,无奇不有</p>
<ul>

</ul>
<script>  
var p0=document.getElementById("attr");
var p=document.createElement("p");                  //创建段落元素
var txt=document.createTextNode("你好世界,世界你好");        //创建文本节点
p.appendChild(txt);       //把文本节点添加到段落节点中
document.body.insertBefore(p,p0);    //添加段落p在p0前面
</script>
</body>
</html>

删除节点

  removeChild()方法可以从子节点列表中删除某个节点,用法如下

  nodeObject.removeChild(node);

  其中参数node为要删除的节点,如果删除成功,则返回被删除的节点,如果失败,则返回null,方使用removeChild()方法删除节点时,该节点所包含的所有子节点将同时被删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大,无奇不有</p>
<ul>

</ul>
<script>  
var p=document.getElementById("attr");      //获取段落节点
document.body.removeChild(p);         //从body中删除段落节点和所有的子节点
</script>
</body>
</html>


替换节点

  replaceChild()方法可以将某个子节点替换为另一个。用法如下:

 

 

 

 

 

 

 

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部