新葡亰496net 新葡亰编程 appendChild(State of Qatar 或 insertBefore(卡塔尔(قطر‎使用与区别介绍

appendChild(State of Qatar 或 insertBefore(卡塔尔(قطر‎使用与区别介绍

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

今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素

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

语法:

复制代码 代码如下:

下面,举例说明document.createElement()的用法。<div
id=”board”></div>
例1:

oElement = document.createElement(sTag)

var inputObj    = document.createElement
     (“<input type=’text’ size=’8′
style=’border:0px;border-bottom:2px solid #c0c0c0;’ ” readonly
>”);

复制代码 代码如下:

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

但是这样的情况在ff下是不兼容的。
还有就是特别注意input元素的创建:与 input
有关的元素有很多,比如:checkbox、radio、submit、reset…,因此创建
input 是个很特殊的用法。

<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>

返回值:返回新元素的引用。

创建不同的 input 正确的做法是:

效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。

创建之后:

复制代码 代码如下:

例2:

创建之后,我们可利用 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;
//如下写法也是正确的:
//e.checked = true;
–>
</script>

复制代码 代码如下:

<div id=”board”></div>

针对 input,在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild
之前,也可以在其之后。但在 IE 中 type 属性必须在前,其它属性必须在后。

<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>

<script type=”text/javascript”>
<!–
var board = document.getElementById(“board”);
var e = document.createElement(“select”);
var obj = board.appendChild(e);
–>
</script>

IE 创建元素,还有一个特点,就是可以连同属性一同创建,比如:var e =
document.createElement(“<input type=’radio’ name=’r’ value=’1′
/>”); 这在其它浏览器中是不行的,所以我们也不支持。

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

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

总结:

例3:

创建元素后,可对元素进行进一步操作。

•针对非 input
元素,各浏览器中,既可以把对元素属性的改变写在显示元素(insertBefore 或
appendChild)之前,也可以在其后。
•针对 input 元素,为了兼容 IE,type 属性写在显示元素(insertBefore 或
appendChild)之前,其它属性写在其后。
推荐:

复制代码 代码如下:

标签:

相关文章

发表评论

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

网站地图xml地图