javascript中创建节点修改节点删除节点
来源:互联网 发布:初学英语单词软件 编辑:程序博客网 时间:2024/05/23 15:44
javascript中创建节点可以通过create***方法进行创建,也可以用cloneNode方法。
create***方法:
1.、createElement()方法用于在HTML中创建新的元素。
2.、createTextNode()方法用于创建一个文本节点。
3、createDocumentFragment()方法用于创建一个文本片段(DocumentFragment),在文档片段中可以添加各种节点,最后一次性添加到html页面中。使用这种编程模式可以减少页面更新的次数,提高页面显示的效率。
下面对这三三种方法进行演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js创建节点</title><script language="javascript"> function add(){ var div1 = document.getElementById("div1"); var newButton = document.createElement("input"); var newTextNode = document.createTextNode("new Text"); newButton.type = "button"; newButton.value = "newButton"; div1.appendChild(newButton); div1.appendChild(newTextNode); } function addFragment(){ var div1 = document.getElementById("div1"); var newButton = document.createElement("input"); newButton.type = "button"; newButton.value = "newButton"; var newTextNode = document.createTextNode("new Text"); var newDocFragment = document.createDocumentFragment(); newDocFragment.appendChild(newButton); newDocFragment.appendChild(newTextNode); div1.appendChild(newDocFragment); }</script></head>
<body><div id="div1" align="center"></div><input type="button" value="addButton" onclick="add()"/><input type="button" value="addFragment" onclick="addFragment()"/></body></html>
以上代码实现了。但是遇到比较复杂的网页这样的添加方法使得代码特别难以维护和复杂。所有可以使用cloneNode方法来复制HTML中已有的节点。对于在网页中创建多个类似节点的情况,可以准备一个模板节点,创建新节点时首先用cloneNode方法获得模板节点副本,然后根据实际应用的需要对该副本节点进行局部内容的修改。使用cloneNode方法是一种非常高效的创建节点的方式,特别是对于复杂的页面。
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js创建节点</title><style type="text/css">div{border-bottom:1px dotted #e63}</style><script language="javascript">var i = 0;function add(){var div1 = document.getElementById("div1");var divParent = div1.parentNode;var clone = div1.cloneNode(true);//设置id属性保证其不重复clone.id = "div" + i;clone.firstChild.innerHTML += " " + (i++);divParent.appendChild(clone);}</script></head><body><div id="div1" align="center"><h1>Template</h1><p>sometext...</p></div><input type="button" value="cloneElement" onclick="add()"/></body></html>
DOM中可以使节点发生变化的常用方法如下:
appendChild:为当前节点新增一个新的节点,并且作为最后一个子节点。
insertBefore:为当前节点新增一个子节点,将其插入到指定子节点之前。
replaceChild:将当前节点的某个子节点替换为其他节点。
removeChild:删除当前节点的某个子节点。
所以对于删除和修改如上例子所示写就可以啦。
- javascript中创建节点修改节点删除节点
- javascript中创建节点修改节点删除节点
- javascript中dom节点操作(创建节点、增加节点、删除节点、克隆节点)
- javascript创建删除节点
- Javascript动态创建/删除节点
- DOM 增加节点 删除节点 修改节点
- 二叉排序树,完成创建节点,插入节点,删除节点,查找节点,中序遍历的功能
- 节点创建删除替换
- jQuery创建,删除节点
- 创建删除节点
- javascript 子节点删除
- JavaScript删除节点
- Javascript创建节点
- javascript创建node节点
- JavaScript创建文本节点
- 16 删除节点 17创建节点
- 单链表创建,删除节点,添加节点,排序
- JavaScript动态增加节点和删除节点
- JAVA for-each循环与数组
- C++处理异常 try,catch,throw
- EXT中xtype的含义分析
- 开始写博客,记录自已的程序员人生
- SQlite对时间的操作
- javascript中创建节点修改节点删除节点
- 实现异步处理----AsyncTask
- 大部分企业建了网站却不会用
- 新手学习数据结构与算法---单链表的基本操作
- wince触摸屏
- 人生十大“折腾”
- 最近关于ubuntu几个问题到解决方法
- 黑马程序员_配置classpath临时变量时是加;好,还是不加;好呢?
- Android的性能测试