js appendChild removeChild 添加 删除 子节点

转载 2013年12月03日 13:52:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<title>js appendChild removeChild 添加 删除 子节点</title>
<script type="text/javascript">
function createSpan(){
    var span=document.createElement("span");
        span.innerHTML="子节点";
   document.getElementById("content").appendChild(span);
} 
function deleteSpan(){
     var content=document.getElementById("content");
   //var childs=content.childNodes;//ie 和ff 获取子节点不一致(ff会将TEXT_NODE计入在内)
     var childs=content.getElementsByTagName("span"); 
       if(null!=childs){
          content.removeChild(childs[childs.length-1]);
       }
}
</script>
</head>
<body>
<div id='content' style='background-color:#ff0000'>
<span>节点</span>
</div>
<input type='button' onclick="createSpan()" value="创建节点"/>
<input type='button' onclick="deleteSpan()" value="删除节点"/>
</body>
</html>

相关文章推荐

js之DOM操作(删除节点removeChild())

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。 语法: nodeObject....

js对节点的操作,添加,删除,获得父节点,子节点,兄弟节点

var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s...

js动态创建table节点并通过appendChild拼接子元素的问题

今天看到一同学的贴子http://topic.csdn.net/u/20120717/10/51e85309-55e5-4f5a-bf0e-bef98c31ae23.html?seed=3869350...

初学js插入节点appendChild insertBefore使用方法

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。 首先 ...
  • bin1813
  • bin1813
  • 2016年04月30日 15:01
  • 124

JS(JavaScript)插入节点的方法appendChild与insertBefore

首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild) insertBefore()...

一次删除多个XML节点(RemoveChild())

很好的一篇文章: 1).(删除某一个指定的节点): 1 nodelist = xmldoc.SelectSingleNode("employees").Child...
  • yal179
  • yal179
  • 2014年09月10日 22:33
  • 1117

JavaScript:删除节点(removeChild)该留意的一点

假设div里有这么些内容: 1 2 3 4 5 6 现在要通过JavaScript的功能,将它们清空。 虽然可以通过一句代码直接实现: documen...

DOM中插入和删除节点(insertBefore()方法和removeChild()方法)

.html代码如下: 插入节点 table{ width:350px; } tr{ text-align:center } td,th{ widt...

getAttribute,appendChild,removeChild,replaceChild,insertBefore 自定义函数

标题中的三个函数的优化:  1.getAttribute 因getAttribute在IE与Firefox上有会区别,比如class,for上面,获取到的值不一样 2.appendChild只能每...

HTML DOM appendChild() 、insertBefore(node, child)、removeChild(child)、replaceChild(node, child)方法使用指南

1、首先创建一个节点; 2、然后创建一个文本节点; 3、然后将文本节点添加到LI节点上; 4、最后将节点添加到列表中。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js appendChild removeChild 添加 删除 子节点
举报原因:
原因补充:

(最多只允许输入30个字)