Javascript 保存动态创建的按钮_Javascript_Html_Twitter Bootstrap_Button

Javascript 保存动态创建的按钮

javascript html twitter-bootstrap button

Javascript 保存动态创建的按钮,javascript,html,twitter-bootstrap,button,Javascript,Html,Twitter Bootstrap,Button,下面是我的代码。在这个例子中，通过点击addgroup，一个按钮被动态创建并添加到fooBar中。但当我刷新页面时，它就会消失。我想创建按钮并将其保存在fooBar中 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and

下面是我的代码。在这个例子中，通过点击addgroup，一个按钮被动态创建并添加到fooBar中。但当我刷新页面时，它就会消失。我想创建按钮并将其保存在fooBar中

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Content</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="stylesheets/bootstrap.min.css" rel="stylesheet">
        <link href="stylesheets/bootstrap.css" rel="stylesheet">
        <link href="stylesheets/bootstrap-theme.min.css" rel="stylesheet">
        <link href="stylesheets/bootstrap-theme.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <SCRIPT language="javascript">
            window.onload = function() {

                document.getElementById('btnAdd').onclick = function()
                {
                    myFunction();

                };
                var person;
                var element;
                function myFunction()
                {
                    var x;

                    person = prompt("Please enter Group Name");

                    if (person != null)
                    {
                        add(element);
//                            x = "Hello " + person + "! How are you today?";
//                            document.getElementById("demo").innerHTML = x;
                    }
                }

                function add(type) {
                    //Create an input type dynamically.   
                    element = document.createElement("button");

                    var t = document.createTextNode(person);
                    element.appendChild(t);
                    //Assign different attributes to the element. 
//                    element.type = type;
//                    element.value = type; // Really? You want the default value to be the type string?
//                    element.name = type;  // And the name too?
                    element.className = "btn btn-default";
                    span.innerHTML=person;
                    element.onclick = function() { // Note this is a function
                        //alert("Do it again!");
                        $("#btn-group").load("head.html");

                    };

                    var foo = document.getElementById("fooBar");


                    //Append the element in page (in span).  
                    foo.appendChild(element);

//                    var d = document.getElementById('fooBar');
//                    d.appendChild(i);
                }



            };
//            function copy()
//                {
//                    var n1 = document.getElementById('addKeyword');
//                    var n2 = document.getElementById('getKeyword');
//                    n2.innerText = n1.value;
//                }
        </SCRIPT>
        <script> 
    $(function(){
      $("#btn-group").load("head.html"); 
    });
    </script>
    </head>
    <body>
        <div class="btn-group" id="fooBar">
<!--                        <button type="button" class="btn btn-default">Marketing</button>
                        <button type="button" class="btn btn-default">Internet</button>
                        <button type="button" class="btn btn-default">Politics</button>-->
            <button type="button" class="btn btn-default" id="btnAdd">Add Group</button>
        </div>
        <div class="boxed">
            <h4>Group:<span class="label label-default" id="span"></span>
                <button type="submit" class="btn btn-default">Edit Name</button>
                <button type="submit" class="btn btn-default">Disable</button>
                <button type="submit" class="btn btn-default">Delete Group</button></h4>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your keyword" id="addKeyword">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" >Add</button>
                        </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div>
            <h4>Keywords:</h4>
<!--            <div class="keyword" id="getKeyword"></div>-->
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="stylesheets/bootstrap.min.js"></script>
        <script src="stylesheets/bootstrap.js"></script>
    </body>
</html>


内容
window.onload=函数（）{
document.getElementById（'btnAdd'）。onclick=function（）
{
myFunction（）；
};
风险人；
var元素；
函数myFunction（）
{
var x；
person=提示（“请输入组名”）；
if（person！=null）
{
添加（元素）；
//x=“你好”+person+“！你今天好吗？”；
//document.getElementById（“demo”）.innerHTML=x；
}
}
功能添加（类型）{
//动态创建输入类型。
元素=document.createElement（“按钮”）；
var t=document.createTextNode（个人）；
元素。子元素（t）；
//为元素指定不同的属性。
//element.type=类型；
//element.value=type；//真的吗？是否希望默认值为类型字符串？
//element.name=type；//名称也是什么？
element.className=“btn btn默认值”；
span.innerHTML=person；
element.onclick=function（）{//注意这是一个函数
//警惕（“再做一次！”）；
$（“#btn group”）.load（“head.html”）；
};
var foo=document.getElementById（“fooBar”）；
//在页面中追加元素（在span中）。
foo.appendChild（元素）；
//var d=document.getElementById（'fooBar'）；
//d.儿童（i）；
}
};
//函数副本（）
//                {
//var n1=document.getElementById（'addKeyword'）；
//var n2=document.getElementById（'getKeyword'）；
//n2.innerText=n1.value；
//                }
$（函数（）{
$（“#btn group”）.load（“head.html”）；
});
添加组
组：
编辑名称
使残废
删除组
添加
关键词：

基本上，您有两种选择：

1）保存信息服务器端：创建一个按钮后，对服务器进行AJAX调用，以某种方式保存配置，并在下次请求此文档时相应地修改交付的html

< P> 2）保存按钮配置客户端：例如，将一个检查合并到页面中，检查潜在创建按钮的ls。< /p>或序列化并将其存储在cookie中（也适用于旧浏览器）。Cookie的缺点是，每次请求都会传输数据，这可能会带来大量开销。