zoukankan      html  css  js  c++  java
  • DOM 动态创建结点

    <!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>
        <title>无标题页</title>
        <script type="text/javascript">
        <!--
            function makeNode(str)
            {
                var newParagraph = document.createElement('p');
                var newText = document.createTextNode(str);
                newParagraph.appendChild(newText);
                return newParagraph;
            }
            function appendBefore(nodeId,str)
            {
                var node = document.getElementById(nodeId);
                var newNode = makeNode(str);
                if(node.parentNode)
                    node.parentNode.insertBefore(newNode,node);
            }
            function inserWithin(nodeId,str)
            {
                var node = document.getElementById(nodeId);
                var newNode = makeNode(str);
                node.appendChild(newNode);
            }
            function appendAfter(nodeId,str)
            {
                var node = document.getElementById(nodeId);
                var newNode = makeNode(str);
                if(node.parentNode)
                {
                    if(node.nextSibling)
                        node.parentNode.insertBefore(newNode, node.nextSibling);
                    else
                        node.parentNode.appendChild(newNode);
                }
            }
               
        //-->
        </script>
    </head>
    <body>
    <h1>DOM 插入 与 增加</h1>
    <hr />
    <div style="background-color:#66ff00;">
        <div id="innerDiv" style ="background-color:#ffcc00;"></div>
    </div>
    <hr />
    <form id= "form1" name= "form1" action="#" method="get">
        <input type="text" id ="field1" name= "field1" />
        <input type="button" value="前插入" onclick="appendBefore('innerDiv',document.form1.field1.value);" />
        <input type="button" value="中插入" onclick="inserWithin('innerDiv',document.form1.field1.value);" />
        <input type="button" value="后插入" onclick="appendAfter('innerDiv',document.form1.field1.value);" />
    </form>
    </body>
    </html>

  • 相关阅读:
    20111013 18:32 女友刁钻无聊问题之标准答案
    20111013 17:40 学ACM有什么用
    typedef用法(1)
    深入C++的new(20111115 15:08 )
    用四个0算二十四点
    20111010 20:14 HDU 4021 (15数码)
    pku3020 Antenna Placement (解法1)
    C++箴言:理解typename的两个含义
    20110907 00:16 ubuntu 如何修改当前用户名
    vc6.0中添加msdn 20111105 11:52
  • 原文地址:https://www.cnblogs.com/LinFx/p/2123732.html
Copyright © 2011-2022 走看看