能否在某个网页元素后面增加东西？

这样行不?<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>new page</title>
<script>
function a(){
var oDiv=document.getElementById("id123");
oDiv.outerHTML=oDiv.outerHTML+"这里是我添加的文本<span>这里是我添加的元素</span>";
alert(document.body.innerHTML);
}
</script>
</head>
<body onload="a()">
<div>
<div id="id123">456</div>
<div id="id789">abc</div>
</div>
</body>
</html>

解决方案 »

  1.   

    可以：<script type="text/javascript">
    function insd(){
    var mydiv=document.getElementById("id123");
    myspan=document.createElement("span");
    myspan.innerHTML="这里是我添加的元素";
    mydiv.parentNode.insertBefore(myspan,mydiv.nextSibling);
    }

    </script>
    <div id="id123">456</div><div id="id789">abc</div>
    ......
    ......
    ......
    </div>
    <input type="button" value="插入" onclick="insd()" />
      

  2.   

    <script language="javascript" type="text/javascript">
    function $()
    {
      var arr=new Array()
      var divs=document.getElementById("hjx").getElementsByTagName("div");
      for(var i=0;i<divs.length;i++)
      {
        arr[i]=divs[i];
      }
      for(var i in arr)
      {
      document.getElementById("hjx").appendChild(arr[i]);
      var sp=document.createElement("span");
      sp.innerHTML="这里是我添加的元素";
      document.getElementById("hjx").appendChild(sp);
      }
    }
    </script>
    <input type="button" value="测试" onclick="$()" />
    <div id="hjx">
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div>
      

  3.   

    <script language="javascript" type="text/javascript">
    function $()
    {
      
      var arr=new Array()
      var divs=document.getElementById("hjx").getElementsByTagName("div");
      for(var i=0;i<divs.length;i++)
      {
        arr[i]=divs[i];
      }
      for(var i=0;i<arr.length-1;i++)
      {
      document.getElementById("hjx").appendChild(arr[i]);
      var sp=document.createElement("span");
      sp.innerHTML="这里是我添加的元素";
      document.getElementById("hjx").appendChild(sp);
      }
    }
    </script>
    <input type="button" value="测试" onclick="$()" />
    <div id="hjx">
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div>
      

  4.   

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#hjx").append('<div>789</div>');
    });
    </script><div id="hjx">
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div>
      

  5.   

    看错要求:改个函数即可...<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#id123").after('这是俺的文本<span>文本哇</span> 测试');
    });
    </script><div id="hjx">
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div>
      

  6.   

    最好放在容器里
    遵循DOM标准
      

  7.   

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("div/div").click(function(){
        var id=$(this).attr('id');
        $(this).after('在后'+id+'面加入的这串文本');
      });
    });
    </script><div id="hjx">
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div id="id123">456</div>
    <div id="id789">abc</div>
    <div>
      

  8.   

    cgisir(☆☆☆===http://www.hansir.cn===☆☆☆) 的方法也不行吗?
      

  9.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <meta http-equiv=Content-Type content="text/html;charset=utf-8">
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    function test(){
    var div = document.getElementById("div");
    var div789 = document.getElementById("id789");
    var span = document.createElement("span");
    span.style.border="solid 1px green";
    var txt = document.createTextNode("这里是我添加的元素");
    span.appendChild(txt);
    div.insertBefore(span, div789);
    var txtNode = document.createTextNode("这里是我添加的文本");
    div.insertBefore(txtNode, span);
    }
      //-->
      </SCRIPT>
     </HEAD> <BODY onload="test()">
    <div id="div">
    <div id="id123">456</div>
    <div id="id789">abc</div>
    </div>
     </BODY>
    </HTML>
      

  10.   

    方法：parentNode.insertBefore(newNode,currentChildNode)
    功能：往parentNode节点中的currentChildNode子节点的前面插入newNode
      

  11.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <div>
    <div id="id123">456</div>
    <div id="id789">abc</div>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    //建立文档碎片，将要添加的文本和span文本一一添加
    var oDf = document.createDocumentFragment();var oText = document.createTextNode("这里是我添加在id789后的元素;");var oSpan = document.createElement("span");
    var oSpanText = document.createTextNode("这里是我添加span里的元素");
    oSpan.appendChild(oSpanText);oDf.appendChild(oText);
    oDf.appendChild(oSpan);
    //判断指定节点的是否存在下一个节点，分别处理
    var selectNode = selectNode1 = document.getElementById("id123");
    //区别ie和firefox对待空白节点的不同定义
    try{
    do
    {
    selectNode = selectNode.nextSibling;

    }while(!selectNode.id)

    selectNode.parentNode.insertBefore(oDf,selectNode);
    }
    catch(ex){
    selectNode1.parentNode.appendChild(oDf);
    }</script>