为什么我这样动态创建的对象不能显示????


<script>
    var newDiv = document.createElement("div");
    
    newDiv.style.width = 20 + "px";
    newDiv.style.height = 20 + "px";
    newDiv.style.backgroundColor = "red";
newDiv.innerHTML = "test";
document.body.appendChild(newDiv);
</script>

解决方案 »

  1.   


    <script>
        var newDiv = document.createElement("div");
        
        newDiv.style.width = 20 + "px";
        newDiv.style.height = 20 + "px";
        newDiv.style.backgroundColor = "red";
    newDiv.innerHTML = "test";
    document.body.appendChild(newDiv);
    </script>
      

  2.   


        var newDiv = document.createElement("div");
        
        newDiv.style.width = 20 + "px";
        newDiv.style.height = 20 + "px";
        newDiv.style.backgroundColor = "red";
    newDiv.innerHTML = "test";
    document.body.appendChild(newDiv);
      

  3.   


        var newDiv = document.createElement("div");
        
        newDiv.style.width = 20 + "px";
        newDiv.style.height = 20 + "px";
        newDiv.style.backgroundColor = "red";
    newDiv.innerHTML = "test";
    document.body.appendChild(newDiv);
      

  4.   

    将这个加到<html>的最后面
    页面加载顺序是从上到下
    执行的时候body还没有加载上 所以找不到对象
      

  5.   

    或者写成函数在<body onload="函数">调用
      

  6.   

    function addspan(obj,text)//添加元素
        { 
            var olddiv;
            if(obj==null)
            {
                olddiv=null;
            }  
            else
            {
                olddiv = document.getElementById(obj.id+"span"); 
            }   
            if(olddiv==null)  
            {        
                var span=document.createElement("span");
                span.innerHTML=text;
                span.className="red";
                span.type="red";
                span.id=obj.id+"span";
                obj.parentNode.appendChild(span,obj);  
            }
         
        }    function add()
        {
            obj=document.getElementById("S_Title");
            addspan(obj,"text");
        }
    <div>标题：<input id="S_Title" type="text" onchange="add()" /></div>
      

  7.   

    上面代码已经测试 成功
    注意 这只是个例子
    还有很多要注意的地方
    例如 你添加了span  有时候还需要删除它
    至于怎么删除 你就自己好好研究下吧
      

  8.   


    <script>
    window.onload=function()
    {
        var newDiv = document.createElement("div");
        document.body.appendChild(newDiv);
        newDiv.style.width = 20 + "px";
        newDiv.style.height = 20 + "px";
        newDiv.style.backgroundColor = "red";
    }
    </script>
    <body>
    </body>
    <script>
        var newDiv = document.createElement("div");
        document.body.appendChild(newDiv);
        newDiv.style.width = 20 + "px";
        newDiv.style.height = 20 + "px";
        newDiv.style.backgroundColor = "red";
    </script>
      

  9.   

    已经说过了 放在前面跟放在后面是不同的 页面加载是从上到下 先执行上面的
    js放在<body>前执行的话body还没有加载 找不到
    放在后面的话body已经加载 就可以找到