新葡亰496net 新葡亰编程 insertBefore 与 appendChild

insertBefore 与 appendChild

<div id=”board”></div>
 
<script type=”text/javascript”>
<!–
var board = document.getElementById(“board”);
 
var e = document.createElement(“input”);
e.type = “radio”;
var obj = board.appendChild(e);
obj.checked = true;
 
var e2 = document.createElement(“input”);
e2.type = “checkbox”;
var obj2 = board.insertBefore(e2, obj);
//如下写法也是正确的:
//var obj2 = board.insertBefore(e2, e);
obj2.checked = false;
–>
</script>

与 input
有关的元素有很多,比如:checkbox、radio、submit、reset…,因此创建
input 是个很特殊的用法。

例3:

appendChild 语法:

<script type=”text/javascript”>
<!–
var board = document.getElementById(“board”);
var e = document.createElement(“input”);
e.type = “radio”; //紧接着上一行写
var obj = board.appendChild(e);
obj.checked = true;
//如下写法也是正确的:
//e.checked = true;
–>
</script>

还可为:

oNode 作为 object 子结点的身份插入 object 的最后一个元素之后。

创建 input

效果:这个例子将在x1节点前面插入一个新的节点

在 IE 中如果省略 oChildNode,则当作追加
oNewNode,而其它浏览器中则不能省略,所以我们编程时,应该当作不可省略来使用

createElement 创建 HTML 元素,在 IE4.0 中只能创建
img、area、option,不过在 IE5 中,我们可以创建除 frame、iframe
以外的所有元素。

根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type=”text”
和 e.setAttribute(“type”,”text”)效果是一致的。

oElement = object.insertBefore(oNewNode, oChildNode)

创建之后:

效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。
当点击这个文本框时,会弹出对话框“This is a test!”。

oElement = object.appendChild(oNode)

oElement = document.createElement(sTag)

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

在 oChildNode 之前插入新的节点 oNewNode,返回插入了的这个新节点引用。

  • 除了 input 元素的 type 属性写在显示元素(insertBefore 或
    appendChild)之前外,其它属性都写在显示元素之后。
  • 改变属性时,对写在显示元素(insertBefore 或 appendChild)之前的用
    createElement 的返回值,对写在显示元素之后的用 insertBefore 或
    appendChild 的返回值。

效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。

示例:

<script type=”text/javascript”>
<!–
var board = document.getElementById(“board”);
var e = document.createElement(“select”);
var obj = board.appendChild(e);
obj.options[0] = new Option(“追加的项”, “”);
obj.size = 2;
//如下写法也是正确的:
//e.options[0] = new Option(“追加的项”, “”);
//e.size = 2;
–>
</script>

复制代码 代码如下:

insertBefore 语法:

上例中,创建一个下拉列表框,并追加到层 board 中。

<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(e3);
</script>

创建之后,我们可利用 insertBefore 或
appendChild
将元素显示在页面中。 

<script type=”text/javascript”>
var board = document.getElementById(“board”);
var e2 = document.createElement(“select”);
e2.options[0] = new Option(“加载项1”, “”);
e2.options[1] = new Option(“加载项2”, “”);
e2.size = “2”;
var object = board.appendChild(e2);
</script>

sTag 要创建的元素名字,如:img、select、input,字符串类型。

效果:这个例子将在x1节点的下一个节点前面插入一个新的节点

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图