DOM基础教程之使用DOM(6)


    <head>
        <title>childNodes</title>
        <meta charset="utf-8" />
        <script language="javascript">
            window.onload = function() {
    var oPold = document.getElementsByTagName("p")[0];
    var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
    var oFragment = document.createDocumentFragment();    //创建文档碎片
    for(var i=0;i<aColors.length;i++){
        var oP = document.createElement("p");
        var oText = document.createTextNode(aColors[i]);
        oP.appendChild(oText);
        oFragment.appendChild(oP);        //将节点先添加到碎片中
    }
    //document.body.appendChild(oFragment);    //最后一次性添加到页面
     oPold.parentNode.insertBefore(oFragment,oPold);//结合insertBefore使文档碎片添加到节点之前
            }
        </script>
    </head>
    <body>
    <p>这里本来有个P</p>
    </body>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxypd.html