在 Javascript 中使用 document.writeln 和输入表单

Question

我正在尝试使用 Javascript 输入表单。在表单上，​​如果下拉选择是某个选择，则特定的表单字段将显示在下面。

这是我当前拥有的代码，但它似乎不起作用，我猜测 document.writeln 不是正确的方法。如果我添加一个警报以查看它是否正在拉动选择，那么它会起作用，因此添加表单的操作会失败。在 document.writeln 之后，警报甚至不再出现？

<script language="javascript">
  var HelpTopic = document.getElementById('type');
  HelpTopic.onchange=function() {
    if(HelpTopic.value == "Analytics") {
      alert("Congrats");
      document.writeln('\<li\>
        \<label for\=\"confirm\"\>Input name*\<\/label\>
        \<input type\=\"text\" name\=\"inputs\" id\=\"names\" required \/\>
        \<\/li\>');
    } else {
      alert("Fails");
    }
  }
</script>

Answer 1

在 JS 中，不能将一个字符串跨多行。你需要这样的东西：

document.writeln('\<li\>' +
  '\<label for\=\"confirm\"\>Input name*\<\/label\>' +
  '\<input type\=\"text\" name\=\"inputs\" id\=\"names\" required \/\>' +
'\<\/li\>');

编辑：你不需要那么多转义。这也同样有效：

document.writeln(
  '<li>' +
   '<label for="confirm">Input name*</label> ' +
   '<input type="text" name="inputs" id="names" required />' +
  '</li>');

Answer 2

要正确地将列表项添加到某个列表，请使用以下代码：

var oList = document.getElementById("MyList");
var oItem = document.createElement("li");
oItem.innerHTML = "<label for='confirm'>Input name*</label><input type='text' name='inputs' required />";
oList.appendChild(oItem);

这会将项目添加到 ID 为 MyList 的列表。

Answer 3

只是一个快速说明，像这样的 JavaScript 支持多行字符串

'<li>\
  <label for="confirm">Input name*</label>\
  <input type="text" name="inputs" id="names" required />\
</li>'

我同意 Shadow Wizard，这将是附加列表的最佳方式

Answer 4

您尝试动态修改“onChange”（缺少大写C）的方式似乎在Chrome中遇到问题

此外，您不能像您那样将字符串拆分为多行

以下代码应该可以工作，请注意我添加了“onChange =” myfunc();"到选择：

<select id=type onChange=myfunc();>";
<option value=Other>Other</option>
<option value=Analytics>Analytics</option>
</select>


<script language="javascript">
function myfunc()
{
var HelpTopic = document.getElementById('type');

if(HelpTopic.value == "Analytics") {
    alert("Congrats");
    document.write('<li><label for="confirm">Input name*</label><input type="text" name="inputs" id="names" required></li>');
} else {
    alert("Fails");
}

}
</script>