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>
posted @ 2007-12-10 08:46  强悍的抽屉  阅读(264)  评论(2编辑  收藏  举报