appendChild()或insertBefore()使用与区别介绍
使用 介绍 区别 appendChild insertBefore
2023-06-13 09:15:06 时间
document.createElement()是在对象中创建一个对象,要与appendChild()或insertBefore()方法联合使用。其中,appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。
下面,举例说明document.createElement()的用法。<divid="board"></div>
例1:
复制代码代码如下:
下面,举例说明document.createElement()的用法。<divid="board"></div>
例1:
<scripttype="text/javascript">
varboard=document.getElementById("board");
vare=document.createElement("input");
e.type="button";
e.value="这是测试加载的小例子";
varobject=board.appendChild(e);
</script>
效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。
例2:
<scripttype="text/javascript">
varboard=document.getElementById("board");
vare2=document.createElement("select");
e2.options[0]=newOption("加载项1","");
e2.options[1]=newOption("加载项2","");
e2.size="2";
varobject=board.appendChild(e2);
</script>
效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。
例3:
<scripttype="text/javascript">
varboard=document.getElementById("board");
vare3=document.createElement("input");
e4.setAttribute("type","text");
e4.setAttribute("name","q");
e4.setAttribute("value","使用setAttribute");
e4.setAttribute("onclick","javascript:alert("Thisisatest!");");
varobject=board.appendChild(e3);
</script>
效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。当点击这个文本框时,会弹出对话框“Thisisatest!”。
根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text"和e.setAttribute("type","text")效果是一致的。
下面,我们用实例来讲述一下appendChild()方法和insertBefore()方法的不同。
比如我们要在下面这个div中插入一个子节点P时:<divid="test"><pid="x1">Node</p><p>Node</p></div>
我们可以这样写:
<scripttype="text/javascript">
varoTest=document.getElementById("test");
varnewNode=document.createElement("p");
newNode.innerHTML="Thisisatest";
//测试从这里开始
//appendChild方法:
oTest.appendChild(newNode);
//insertBefore方法:
oTest.insertBefore(newNode,null);
</script>
通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。
在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null),这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:
<scripttype="text/javascript">
varoTest=document.getElementById("test");
varrefChild=document.getElementById("x1");
varnewNode=document.createElement("p");
newNode.innerHTML="Thisisatest";
oTest.insertBefore(newNode,refChild);
</script>
效果:这个例子将在x1节点前面插入一个新的节点
又或:
<scripttype="text/javascript">
varoTest=document.getElementById("test");
varrefChild=document.getElementById("x1");
varnewNode=document.createElement("p");
newNode.innerHTML="Thisisatest";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
效果:这个例子将在x1节点的下一个节点前面插入一个新的节点
还可为:
<scripttype="text/javascript">
varoTest=document.getElementById("test");
varnewNode=document.createElement("p");
newNode.innerHTML="Thisisatest";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
从这几个例子中得出:
appendChild()方法在节点的子节点列表末添加新的子节点。
insertBefore()方法在节点的子节点列表任意位置插入新的节点。
相关文章
- Git的简单使用——连接码云
- 1.什么是线程池?为什么要使用线程池
- [Ansible专栏]Ansible条件判断的介绍和使用
- Java 8 使用 Stream 把 List 转换为 map
- 使用Postman工具做接口测试(一)——基本功能介绍
- 介绍一款 ABAP 代码搜索工具 RS_ABAP_SOURCE_SCAN 的使用方法
- Struts2 ajax json使用介绍详解编程语言
- 使用开源工具创建私有的虚拟专用网络
- “抛弃Windows,选择Linux,你需要知道的5大理由”(为什么使用linux系统)
- 使用MySQL进行乘法运算实现的简单方法(mysql乘法)
- 教你如何使用Oracle日期格式化——附详细图片演示(oracle日期格式图片)
- 缓存系统使用Redis提升系统性能的分布式缓存系统(redis是分布式)
- 如何提升使用Oracle如何加快数据写入效率(oracle写数据效率)
- 快速简易的Redis数据库使用介绍(redis 题目)
- Oracle 中使用 MOD 函数取余数(oracle中取余数函数)
- WinForm的Splitter使用心得与技巧
- SQLServer2005中的SQLCMD工具使用
- php数组函数序列之shuffle()和array_rand()随机函数使用介绍
- JSP相关对象的使用介绍
- 基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
- C#中的yield关键字的使用方法介绍
- Jquery选择子控件"大于号"和""区别介绍及使用示例
- JS.GetAllChild(element,deep,condition)使用介绍
- WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍
- MariaDB中的threadpool详细介绍和使用方法