insertAdjacentElement(sWhere, oElement)概要用法

在一个临近的指定的位置插入一个元素.

语法：

oElement = object.insertAdjacentElement(sWhere, oElement)
 参数：

oElement     :　必选项。对象(Element)。要插入到 object 邻近的对象。

sWhere         :　必选项。字符串(String)。

beforeBegin  :　将 oElement 插到 object 的开始标签之前。
afterBegin     :　将 oElement 插到 object 的开始标签之后。但是在object 的所有原有内容之前。
beforeEnd     :　将 oElement 插到 object 的结束标签之前。但是在object 的所有原有内容之后。
afterEnd        :　将 oElement 插到 object 的结束标签之后。

位置详细说明:  

beforeBegin 在目标元素的外部开头位置. <i>---><o>..</o>
afterBegin  在目标元素的内部开头位置.  <o><----<i>..</o>
beforeEnd  在目标元素的内部结束位置.  <o>..<i>----></o> 
afterEnd  在目标元素的外部结束位置.    <o>..</o><----<i> 

<i>标明了位置  -->标明了增长方向     可以看成类似一个右倒的M书写方向

说明：

　　将 oElement 依据 object 定位插入文档结构。

　　当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。

　　假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。

实例：

<script>
    function doApply(e) {
        with (document.all("oSelect1"))
            var s1 = options[selectedIndex].value;
        with (document.all("oSelect2"))
            var s2 = options[selectedIndex].value;

        var NewNode = document.createElement(s1);
        List.insertAdjacentElement(s2, NewNode);
        NewNode.innerText = s2

    }   
</script>   
  
<div id=oCode>   
	<ul id=List>   
	<li>列表项目1   
	<li>列表项目2   
	</ul>   
</div> 


<table height=56>
<tr>  
	<td>
	<select style="width:100px;" id=oSelect1>   
	<option value="button" selected>button</option>   
	<option value="b">b</option>   
	</select>
	</td>  


	<td>
	<select style="width:100px;" id=oSelect2>   
	<option value="beforeBegin" selected>beforeBegin</option>   
	<option value="afterBegin">afterBegin</option>   
	<option value="beforeEnd">beforeEnd</option>   
	<option value="afterEnd">afterEnd</option>   
	</select>
	</td>   

	<td>
	<input type=button value=" 插入 " onclick="doApply(this)">
	</td>   
</tr>
</table>