JavaScript中字符串拼接的问题

Question

嘿，我正在尝试使用JavaScript拼接字符串，但是出现了错误。这是我的代码：

function popForm(){
   var v = document.getElementById('a1').innerHTML;

   document.getElementById("a1_i").innerHTML =
      "<input type='text' name='a1_i' value="+v+" />";
}

元素a1_i是一个span，我正在用上面显示的输入标签填充它。

更进一步，我使用ID为a1的元素进行编辑：

document.getElementById("a1").innerHTML="blah bloop";

然而，当我尝试查看结果时，我只能看到无聊的东西，而不是bloop。

有什么建议吗？

- beepboop

---

你应当使用诸如“createElement”和“appendChild”之类的DOM方法来构建HTML，而不是字符串拼接。 - jbabey

从网上查找的结果来看，这是普遍共识。不过这只是我和朋友之间的小项目，所以我不想花时间去学习其他东西。不过我发现我只是错过了一些引号。谢谢！ - beepboop

Answer 1

如果你查看生成的HTML，你会注意到以下内容：

<input type='text' name='a1_i' value=blah bloop />

正如语法高亮所示，value属性的值为blah，而bloop是另一个属性。您只需要添加引号：

function popForm(){
  var v = document.getElementById('a1').innerHTML; 
  document.getElementById("a1_i").innerHTML="<input type='text' name='a1_i' value='" + v   + "' />";
}

但如果v包含符号'，那么你又遇到麻烦了。所以你应该用HTML实体来替换它们，或者遵循jbabey的建议。

- Artem Sobolev

Answer 2

我同意Jbabey的观点，这将为您节省将来在文本/ HTML字符串（容易出错）中进行额外编码的时间。JavaScript连接非常直接。

*variable1 + "Text, note quotes around" + variablearray[1] + "etc...";*

使用以下方法：document.createElement、document.createTextNode和appendChild。

https://developer.mozilla.org/en-US/docs/DOM/document.createElement https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

- Craig London