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>
  • 相关阅读:
    try和catch
    获取地址栏参数(E积分项目)
    正则验证,只能输入数字,每四位隔一个空格。
    E积分项目总结(绑卡页 第一步)
    本地存储localStorage用法详解
    python os 模块介绍
    生成器迭代器
    python 魔法方法
    匿名函数
    python自定义函数和内置函数
  • 原文地址:https://www.cnblogs.com/linsongbin/p/988848.html
Copyright © 2011-2022 走看看