使用createElement动态创建HTML对象
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。
其中，
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
下面，我们用实例来讲述一下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最后一个节点。很明显，通过这个例子，可以知道appendChildhild和insertBefore都可以进行插入节点的操作。
在上面的例子中有这样一句代码：oTest.insertBefore(newNode,null) ，这里insertBefore有2个参数可以设置，第一个是和appendChild相同的，第二却是它特有的。它不仅可以为null，还可以为：
<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);</script>
效果：这个例子将在x1节点前面插入一个新的节点
又或：
<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>
效果：这个例子将在x1节点的下一个节点前面插入一个新的节点
还可为：
<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); </script>
这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNodes来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点，但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来，发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
下面是收集的几个小例子:
1.创建链接
<div class="code" style="margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #b8c9d3; border-right-color: #b8c9d3; border-bottom-color: #b8c9d3; border-left-width: 4px; border-left-style: solid; border-left-color: #b8c9d3; display: block; background-color: #f7fafd; color: #0070a6; font-size: 12px; line-height: 18px; text-align: left;"><script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://www.webjx.com/","网页教学网");
</script>
页:
[1]