js dom结点的插入与追加示例

来源:web开发    发布日期:2010-11-21    阅读数:

<html> 
<head> 
<title>js DOM插入与追加</title> 
<script type="text/javascript">
   /*使用appendChild创建结点*/ 
   function CreateNode(str)   
   { 
      //创建新div 
      var NewDiv = document.createElement("div");  
      //对div设置 id属性 
        NewDiv.id = "dd";  
      //创建div内加入的内容 
      var NewText = document.createTextNode(str); 
      //追加一个新的子结点 
        NewDiv.appendChild(NewText); 
      //返回新创建结点数据 
      return NewDiv;                                 
   } 
   //向指定结点前插入新结点函数 
   function AppBefore(nodeId, str)                     
   { 
      var node = document.getElementById(nodeId); 
      var newNode = CreateNode(str); 
      //如果存在双亲结点 
      if(node.parentNode)                               
      { 
         //insertBefore(newchild,refchild)  说明:newchild(插入的新结点) refchild(将新结点插入到此结点前) 
         node.parentNode.insertBefore(newNode, node); 
      } 
   } 
   //向指定结点内插入新结点函数 
   function insertWithin(nodeId, str)   
   {   
      //指定结点 id 
      var node = document.getElementById(nodeId); 
      var newNode = CreateNode(str); 
      //追加一个新的结点 
      node.appendChild(newNode); 
   } 
   //向指定结点后插入新结点函数 
   function AppAfter(nodeId, str)     
   { 
      var node = document.getElementById(nodeId); 
      var newNode = CreateNode(str); 
      //如果存在上一级结点 
      if(node.parentNode)     
      { 
         //如果存在下一子结点 
         if(node.nextSibling)   
         { 
            // 在下一子结点前插入子结点 
            node.parentNode.insertBefore(newNode, node.nextSibling); 
         }else{ 
            // 如果没有下一子结点向后追加子结点 
            node.parentNode.appendChild(newNode); 
         } 
      } 
   } 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> 
<body> 
<h1><center> DOM JS 插入与追加</center></h1> 
<hr> 
<div style="background-clolor: #66ff00;" mce_style="background-clolor: #66ff00;"> 
   <div id="appendChild" style="background-color:#ffcc00;" mce_style="background-color:#ffcc00;"></div> 
</div> 
<hr> 
<!--/star--> 
<form id="form" name="form" action="#" method="get"> 
    <input type="text" id="files" name="files"> 
    <input type="button" value="指定结点前插入新结点" onClick="AppBefore('appendChild', document.form.files.value);"> 
    <input type="button" value="指定结点中插入新结点" onClick="insertWithin('appendChild', document.form.files.value);"> 
    <input type="button" value="指定结点后插入新结点" onClick="AppAfter('appendChild', document.form.files.value);"> 
</form> 
<!--/enf--> 
</body> 
</html>

站内搜索


Copyright;2009-2009 webcenter.hit.edu.cn All Rights Reserved 哈工大网络与信息中心