Question

我是Javascript的新手。我想在用户点击“创建元素”按钮时动态创建一个新按钮。该脚本创建一个按钮，但只有几分之一秒。此外，没有为按钮设置'value'属性。

如果行为背后有任何理论，请将我重定向到正确的网址。

以下是代码：

<html>

<head>
    <script type="text/javascript">
    function doSomething(){     
        myButton = document.createElement("button");        
        myButton.setAttribute("value","New Button");        
        document.getElementById("myForm").appendChild(myButton);        
    }
    </script>
</head>

<body>
    <form id="myForm">
        <button name="myButton" id="myButtonID" onclick="doSomething()">Create Element</button>
    </form>
</body>

</html>

Answer 1

默认情况下，<button>元素是提交按钮 - 因此您正在提交表单，导致重新加载页面。

您需要使用：

<button type="button" ...>...</button>

或者：

<input type="button" ...>

Answer 2

你的onclick回调必须返回false。

<button name="myButton" id="myButtonID" onclick="doSomething(); return false">

Answer 3

我不会那样创建按钮。我会做这样的事情：

    myButton = document.createElement('input');
myButton.setAttribute("type","button");

Answer 4

如前所述，使用＆＃34;输入＆＃34;相反＆＃34;按钮＆＃34;。因为＆＃34;按钮＆＃34;导致页面刷新的回发。通过使用＆＃34;输入＆＃34;你没有获得回发

//在html页面中创建新元素

function createElement_Click()
{

    // btn variable will contain a RAW html [<input></input>] object
    var btn = document.createElement("input");
    //So now we can manipulate its properties:
    btn.type = "button"; //equal to (<input type="button"></input>) in html

    //add some value to it
    btn.value = "Click Me";
    btn.id = "btnShow";
    btn.onclick = function() { ShowMessage(); };

    // step -1 put your newly created object into html
    document.getElementById("myDiv").appendChild(btn);


}

function ShowMessage() {
    alert("hello world");
}

Javascript：动态创建的按钮消失了吗？

4 个答案: