分析代码时,发现自己的盲点——document.createElement_x(),冲浪一番,总结了点经验。
例1:
-
<script type="text/javascript">
-
= document.getElementByIdx_x("board"); -
= document.createElement_x("input"); -
e.type =
-
e.value =
-
= board.appendChild(e); -
</script>
效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。
例2:
-
<script type="text/javascript">
-
= document.getElementByIdx_x("board"); -
= document.createElement_x("select"); -
e2.options[0] =
-
e2.options[1] =
-
e2.size =
-
= board.appendChild(e2); -
</script>
效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。
例3:
-
<script type="text/javascript">
-
= document.getElementByIdx_x("board"); -
= document.createElement_x("input"); -
e4.setAttribute(
-
e4.setAttribute(
-
e4.setAttribute(
-
e4.setAttribute(
is a test!');"); -
= board.appendChild(e3); -
</script>
效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击这个文本框时,会弹出对话框“This is a test!”。
我们可以这样写:
-
<script type="text/javascript">
-
var oTest = document.getElementByIdx_x(
-
var newNode = document.createElement_x(
-
newNode.innerHTML =
-
-
-
oTest.appendChild(newNode); -
-
oTest.insertBefore(newNode,
-
</script>
在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:
-
<script type="text/javascript">
-
var oTest = document.getElementByIdx_x(
-
var refChild = document.getElementByIdx_x(
-
var newNode = document.createElement_x(
-
newNode.innerHTML =
-
oTest.insertBefore(newNode,refChild); -
</script>
效果:
这个例子将在x1节点前面插入一个新的节点
又或:
-
<script type="text/javascript">
-
var oTest = document.getElementByIdx_x(
-
var refChild = document.getElementByIdx_x(
-
var newNode = document.createElement_x(
-
newNode.innerHTML =
-
oTest.insertBefore(newNode,refChild.nextSibling); -
</script>
效果:这个例子将在x1节点的下一个节点前面插入一个新的节点
还可为:
-
<script type="text/javascript">
-
var oTest = document.getElementByIdx_x(
-
var newNode = document.createElement_x(
-
newNode.innerHTML =
-
oTest.insertBefore(newNode,oTest.childNodes[ -
</script>
这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
从这几个例子中得出:
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
document方法:
getElementById(id)
getElementsByTagName_r(name)
createElement_x(name)
createTextNode(text)
element方法:
getAttribute(id)
setAttribute(id,value)
removeAttribute(id)
getElementsByTagName_r(name)
node方法:
appendChild(child)
removeChild(child)
replaceChild(newChild,oldChild)
insertBefore(newChild,refChild)