Question

以下是我的代码。通过单击“添加组”，可以动态创建一个按钮并将其添加到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>

Answer 1

基本上，您有两种选择：

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

2）保存按钮配置客户端：例如very simple via localStorage并将检查集成到您的页面中，以检查LS是否有可能创建的按钮。

保存动态创建的按钮

1 个答案: