Javascript動態添加字段（onClick）

Question

我正在嘗試動態添加一些字段。 例如，當用戶單擊復選框或單選按鈕時，會出現一些額外的字段（按鈕、文本字段等）。 如果是的話，我可以用 onClick 來做到這一點，我該怎么做？

謝謝！

Answer 1

網站中已有按鈕，只需使用以下某種形式隱藏它們：

<button style="display: none"></button>

然后，您可以根據需要顯示和隱藏它們。

優點

您可以預先設置按鈕、文本字段等的樣式，並通過 CSS 將其按照您希望的方式放入網站
您可以使用另一個隱藏元素的函數刪除它們
沒有凌亂的JS

缺點

真的沒有...

實施例

<html>
    <head>
        <title>My Page</title>
        <style>
            #button2 {
                display: none;
            }
        </style>
    </head>
    <body>
        <button onclick="show('button2')">Click Me!</button>
        <button id="button2">Click Me!</button>
        <script>
            function show(element) {
                document.getElementById(element).style.display = block;
            }
        </script>
    </body>
</html>

Answer 2

最簡單的方法，

讓您想要在 html 中預編碼但使用 css 隱藏的元素出現。

例如：

 // If enyone "change" the magic checkbox, ... I will know it document.getElementById('magic_checkbox').addEventListener('change', function(){ // Is it checked... because if it is, // I should show the more inputs if(this.checked){ document.getElementById('some_more_data').style.display = "block"; } // If it is unchecked // I should hide them else{ document.getElementById('some_more_data').style.display = "none"; } }, false);

 <!-- The mahic check box --> <input id="magic_checkbox" type="checkbox" name="something" value="a_value"> Do you want more?<br> <!-- My hidden inputs --> <div id="some_more_data" style="display:none;"> <input type="text" name="other_data_no1" value="Yeah!"><br> <input type="text" name="other_data_no2" value="Fill me!"> </div> <!-- Some other data --> <input type="number" name="something_else" value="123"><br>

Answer 3

你可以。 此代碼復制形式： http : //www.w3schools.com/jsref/met_document_createelement.asp

var btn = document.createElement("BUTTON");        // Create a <button> element
var t = document.createTextNode("CLICK ME");       // Create a text node
btn.appendChild(t);                                // Append the text to <button>
document.body.appendChild(btn);                    // Append <button> to <body>

Javascript動態添加字段（onClick）

問題描述

3 個解決方案

解決方案1
1 2016-07-09 14:40:25

優點

缺點

實施例

解決方案2
1 已采納 2016-07-09 14:41:02

解決方案3
0 2016-07-09 14:22:17

Javascript動態添加字段（onClick）

問題描述

3 個解決方案

解決方案1 1 2016-07-09 14:40:25

優點

缺點

實施例

解決方案2 1 已采納 2016-07-09 14:41:02

解決方案3 0 2016-07-09 14:22:17

解決方案1
1 2016-07-09 14:40:25

解決方案2
1 已采納 2016-07-09 14:41:02

解決方案3
0 2016-07-09 14:22:17