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>

1.javaScript(JS)常用函数之 appendChild 和removeChild

javaScript(JS)常用函数之 appendChild 和removeChild
  • yuxuan89814
  • yuxuan89814
  • 2014年08月29日 10:58
  • 1186

动态操作节点(appendChild(),insertBefore(),removeChild(),replaceChild())

JS里动态创建元素节点:document.createElement(‘标签名’); 给一个元素追加一个子元素:当前元素.appendChild(子元素); 在指定的元素前插入新的元素:父级.inse...
  • NewStart_lh
  • NewStart_lh
  • 2015年06月25日 23:03
  • 1072

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

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。 语法: nodeObject....
  • u010359143
  • u010359143
  • 2015年09月21日 17:32
  • 10573

appendChild() , insertBefore()插入节点需注意的问题

使用appendChild()和insertBefore()插入节点都会返回给插入的节点,//由于这两种方法操作的都是某个节点的子节点,所以必须现取得父节点,代码中 someNode 表示父节点 //...
  • yuhero_bbs
  • yuhero_bbs
  • 2015年03月30日 17:00
  • 1279

JS动态增加删除UL节点LI及相关内容

11111111111111111del 22222222222222222del 33333333333333333del 44444444444444444del 555555555555...
  • thl331860203
  • thl331860203
  • 2013年01月25日 15:31
  • 32258

SVG DOM常用属性和方法介绍(1)

12.2 SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析...
  • luqin1988
  • luqin1988
  • 2013年01月11日 16:30
  • 12134

Javascript removeChild()不能删除全部子节点的解决办法

在Javascript中,只提供了一种删除节点的方法:removeChild()。 removeChild() 方法用来删除父节点的一个子节点。 语法:     parent.removeChil...
  • TheManOfCoding
  • TheManOfCoding
  • 2017年11月28日 00:54
  • 57

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

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。 语法: nodeObject....
  • u010359143
  • u010359143
  • 2015年09月21日 17:32
  • 10573

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

var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s...
  • jenyzhang
  • jenyzhang
  • 2015年09月28日 03:48
  • 12721

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

今天看到一同学的贴子http://topic.csdn.net/u/20120717/10/51e85309-55e5-4f5a-bf0e-bef98c31ae23.html?seed=3869350...
  • kunkkaCoco
  • kunkkaCoco
  • 2012年07月17日 15:07
  • 7618
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js appendChild removeChild 添加 删除 子节点
举报原因:
原因补充:

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