每次单击都使Javascript打印字符串

Question

[我试图使JavaScript每次单击按钮时都打印一个字符串，但是它只会在我第一次单击时打印它。

JavaScript：

function MoreCameras() {
         document.getElementById("AddCamera").innerHTML = "<tr><td><input type='text' name='SSIDSetup[]' class='form-control' placeholder='Camera SSID'></td><td><input type='text' name='NameSetup[]' class='form-control' placeholder='Camera Name'></td><td><input type='password' name='PasswordSetup[]' class='form-control' placeholder='Camera Password'></td><td><input type='checkbox' name='EnabledSetup[]'/></td></tr>";
    }

HTML：

<table>
     <div id="AddCamera"></div>
</table>
<button onclick="MoreCameras()">Add camera</button>

我已经尝试过类似的方法，但是仍然无法使它起作用：

 function MoreCameras() {
        var div = document.getElementById("AddCamera").innerHTML,
            clone = "Long string here";
    }

Answer 1

似乎您遇到的问题是您正在设置innerHTML而不是添加到它。

您可以使用innerHTML运算符添加到+=。

例如：

function MoreCameras() {
  document.getElementById("AddCamera") += "... some string ...";
}

Answer 2

您可以在MoreCameras函数中尝试使用这种方法：

1. 创建新的<tr></tr>元素。
2. 将表中的所有内容放入表行中（为方便起见，存储在newCamera变量中。
3. 将行添加到表中。

var newCamera = "<td><input type='text' name='SSIDSetup[]' class='form-control' placeholder='Camera SSID'></td><td><input type='text' name='NameSetup[]' class='form-control' placeholder='Camera Name'></td><td><input type='password' name='PasswordSetup[]' class='form-control' placeholder='Camera Password'></td><td><input type='checkbox' name='EnabledSetup[]'/></td>";



function MoreCameras() {
  var row = document.createElement("tr");
  row.innerHTML = newCamera;
  document.getElementById("AddCamera").appendChild(row);
}

<table id="AddCamera">
</table>
<button onclick="MoreCameras()">Add camera</button>