利用Javascript函数来给一个DIV上添加按钮等控件？

JS文件中的函数
function create2div() {
    //创建DIV    var div2 = document.createElement("div");
    div2.setAttribute("id", "div2id");
    div2.style.position = "absolute";
    div2.style.background = "#00FF7F";
    div2.style.top = "50";
    div2.style.left = "50";
    div2.style.width = screen.width / 2 + "px";
    div2.style.height = screen.height / 2 + "px";
    div2.style.zIndex = "10001";
    document.body.appendChild(div2);    //在上面的DIV上创建一个按钮    
    var button = document.createElement("input"); //创建一个input对象（提示框按钮）  
    button.setAttribute("type", "button");
    button.setAttribute("value", "关闭");
    button.style.width = "60px";
    button.style.align = "center";
    button.style.marginLeft = "250px";
    button.style.marginBottom = "10px";
    button.style.background = "#000000";
    button.style.border = "1px solid " + "#000000";//52
    button.style.color = "white";
    
    document.getElementById("div2id").apppendChild(button);
}
但是总是提示行: 
56
错误: 对象不支持此属性或方法，不知道是不是DIV这个对象不能引用这个方法吗？appendChild

解决方案 »

  1.   

     document.getElementById("div2id").apppendChild(button);
    中apppendChild的这个多了一个p
      

  2.   

     document.getElementById("div2id").innerHTML=button;试试
      

  3.   

    另外还有点疑问，我用两种按钮来实现两层DIV，
    <asp:Button ID="btn1" runat="server" Text="出现锁定半透明DIV" onclick="btn1_Click" />
            <br/>
            <input id="inpid" type="button" value="不消失的DIV" onclick="creatediv()" runat="server" />
    第一种是ASP控件来调用JS中的函数，第二种是客户端控件来调用JS文件中的函数，点两个按钮都能出现想要的两层DIV效果，也就是像百度登录那样的，一层灰透明，另一层是登录窗口，窗口里有按钮和textbox那样的；
    但是出现效果后刷新一下就会有不同的结果了，第一种按钮生成 的效果在刷新页面后还会出现“点击”按钮那样的事，也就是效果重现，第二种按钮生成的效果后，刷新页面就会效果消失 不重现；
    这是什么情况 呢？
      

  4.   


    可以贴出asp 那个事件的代码吗？最好Page_Load(object sender, EventArgs e)也给看看
      

  5.   

    好的，我都贴出来吧，
    .cs文件：
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;public partial class js_try : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
        protected void btn1_Click(object sender, EventArgs e)
        {
            
            ClientScript.RegisterStartupScript(typeof(Int16), "creatediv", "creatediv()", true);
        }
    }
    .aspx文件：
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="js_try.aspx.cs" Inherits="js_try" %><!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 runat="server">
        <title>测试</title>
        <%-- 引入JS文件--%>
        <script src="js/JScript.js" type="text/javascript" ></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Button ID="btn1" runat="server" Text="出现锁定半透明DIV" onclick="btn1_Click" />第一种按钮        <br/>
            <input id="inpid" type="button" value="不消失的DIV" onclick="creatediv()" runat="server" />         第二种按钮    
    </div>
        </form>
    </body>
    </html>
    .js文件function creatediv(  ) {
        var bgObj = document.createElement("div"); //创建一个div对象（背景层）  
        //定义div属性，
        bgObj.setAttribute('id', 'bgDiv');
        bgObj.style.position = "absolute";
        bgObj.style.top = "0";
        bgObj.style.background = "#F4A460";
        bgObj.style.filter = "Alpha(style=3,opacity=25,finishOpacity=50)"; //progid:DXImageTransform.Microsoft.没有也可以的
        bgObj.style.opacity = "0.6";
        bgObj.style.left = "0";
        bgObj.style.width =screen.width + "px";
        bgObj.style.height = screen.height + "px";
        bgObj.style.zIndex = "10000";
        document.body.appendChild(bgObj); //在body内添加该div对象
        alert("ok");
        create2div(); //调用下一个函数创建一个新的DIV
    }//创建第二层DIV
    function create2div() {
        var div2 = document.createElement("div");
        div2.setAttribute("id", "div2id");
        div2.style.position = "absolute";
        div2.style.background = "white";
        div2.style.top = "50";
        div2.style.left = "50";
        div2.style.width = screen.width / 2 + "px";
        div2.style.height = screen.height / 2 + "px";
        div2.style.zIndex = "10001";
        document.body.appendChild(div2);    var button = document.createElement("input"); //创建一个input对象（提示框按钮）  
        button.setAttribute("type", "button");
        button.setAttribute("value", "关闭");
        button.style.position = "absolute";
        button.style.width = "60px";
        button.style.top = "50px";
        button.style.background = "#000000";
        button.style.border = "1px solid " + "#000000";//52
        button.style.color = "white";
        
        //在第二层DIV中添加文本框和按钮
        document.getElementById("div2id").appendChild(button);
    }