document.createElement()的用法

document.createElement()是在对象中创建一个对象,要与appendChild()或insertBefore()方法联合使用。其中,appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。


用法:<div id="board"></div>


例1:
<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "测试例子";
var object = board.appendChild(e);
</script>

例2:
<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.option[0] = new Option("加载项1","");
e2.option[1] = new Option("加载项2","");
e2.size = "2";
var object = board.appendChild(e2);
</script>
效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”

例3:
<script type="text/javascript">
var board = document.getElementById("board");
var e3 = document.createElement("input");
e4.setAttribute("type","text");
e4.setAttribute("name","q");
e4.setAttribute("value","使用setAttribute");
e4.setAttribute("onclick","javascript:alert('This is a test');");
var object = board.appendChild(e4);
</script>

appendChild()和insertBefore()的不同

在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</P><p>Node</p></div>

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "this is a test";
//测试从这里开始
//appendChild()方法
oTest.appendChild(newNode);
//insertBefore方法
oTest.insertBefore(newNode,null);
</script>

通过以上代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChild和insertBefore都可以进行插入节点的操作。

oTest.insertBefore(newNode,null),这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二是他独有的。他不仅可以是null,还可以为:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElement("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "this is a test";
oTest.insertBefore(newNode,refChild);
</script>
效果:这个例子将在xl节点前面插入一个新的节点。

又或:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "this is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
效果:这个例子将在xl节点的下一个节点前面插入一个新的节点。

还可为:
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>

这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNode[0,1,...]来在其他位置插入新的节点

由此可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例1中使用insertBefore()方法也可以在子节点列表末插入新节点的。结合两种情况,insertBefore()方法插入节点,可以在子节点列表的任意位置。

从这几个例子中得出:
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值