为什么我用创建的子元素都没产生在对应的父元素下？


<!DOCTYPE html><html>
<head>
<script type="text/javascript">
var temptar = null;
var i = 0;

function add() {
var para=document.createElement("div");
var j = i; var node=document.createTextNode("This is line:" + j);
para.appendChild(node);
var element=document.getElementById("target");
element.appendChild(para);
i++; }

function addChild() {
var para=document.createElement("p");
var j = i; var node=document.createTextNode("This is child line:" + j);
para.appendChild(node);
var element=temptar.parentNode;
element.appendChild(para);
i++;
}
function whichElement(e)
{
var targ
if (!e) 
var e = window.event
if (e.target) 
targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
   targ = targ.parentNode

var tname
temptar = targ;
tname=targ.tagName }

function delete1() {
var parent = document.getElementById("target");
parent.removeChild(temptar);
}
</script>
<title>
</title>
</head>
<body>
<div align="center">
<br>
<br>
<br>
<button onclick="add()">ADD</button>
<button onclick="addChild()">ADD CHILD</button> <button onclick="delete1()">DELETE</button>

</div>

<div name="target" id="target" align="center" onmousedown="whichElement(event)">
<p id="p1">asdfasdfdasfadsfsda</p>


</div> </body></html>为什么我用创建的子元素都没产生在对应的父元素下？而都产生在了最下面？

解决方案 »

  1.   

    <!DOCTYPE html>
     
    <html>
        <head>
        <script type="text/javascript">
        var temptar = null;
        var i = 0;
         
                    function add() {
                            var para=document.createElement("div");
                            var j = i;
     
                            var node=document.createTextNode("This is line:" + j);
                            para.appendChild(node);
                            element=document.getElementById("target");
                            element.appendChild(para);       
                            i++;
     
                    }
                     
                    function addChild() {
                            var para=document.createElement("p");
                            var j = i;
     
                            var node=document.createTextNode("This is child line:" + j);
                            para.appendChild(node);
                            var element=temptar.parentNode;
                            element.appendChild(para);       
                            i++;
                    }
                     
     
        function whichElement(e)
        {
        var targ
        if (!e) 
                var e = window.event
        if (e.target) 
                targ = e.target
        else if (e.srcElement) targ = e.srcElement
        if (targ.nodeType == 3) // defeat Safari bug
           targ = targ.parentNode
         
        var tname
        temptar = targ;
        tname=targ.tagName
     
        }
         
        function delete1() {
                var parent = document.getElementById("target");
                parent.removeChild(temptar);   
        }
        </script>
            <title>
            </title>   
     
         
        </head>
     
     
                <body>
                    <div align="center">
                    <br>               
                    <br>
                    <br>
                    <button onclick="add()">ADD</button>
                    <button onclick="addChild()">ADD CHILD</button>
     
                    <button onclick="delete1()">DELETE</button>
                     
                    </div>
                     
                    <div name="target" id="target" align="center" onmousedown="whichElement(event)"></div>
                    <p id="p1">asdfasdfdasfadsfsda</p>
     
                </body>
     
    </html>................建议重新想下思路  感觉好乱的说
      

  2.   

    你代码不都是加载target这个容器下。。你要加在什么里面？？
            function addChild() {
                var para = document.createElement("p");
                var j = i;            var node = document.createTextNode("This is child line:" + j);
                para.appendChild(node);
                var element = temptar.parentNode;
                element.appendChild(para);
                i++;
            }
      

  3.   

    那你就不要调用parnetNode        function addChild() {
                var para = document.createElement("p");
                var j = i;            var node = document.createTextNode("This is child line:" + j);
                para.appendChild(node);
                var element = temptar//.parentNode;
                element.appendChild(para);
                i++;
            }