javascript - 使用 javascript 添加 HTML 标签

Question

我在动态添加 html 标签时遇到问题。我正在创建一个输入标签作为

var valueString = $("#className").val();
var htmlString = "<input type='hidden' id='class' name='class' value='"+ valueString +"' />"

现在的问题是，当“valueString”包含撇号 (') 时，创建的输入值会从撇号中 chop 。如何将变量附加为单个字符串？

如果我用双引号 (") 更改撇号 (')，那么当变量包含双引号 (") 时就会出现问题。

Answer 1

不要通过将字符串混合在一起来构建 HTML，这是造成此类问题的主要原因。改用 DOM(或围绕它的 jQuery 包装器)。

var valueString = $('#className').val();
var $input = $("<input />", {
   type: "hidden",
   name: "class",
   value: valueString,
   id: "class"
});

然后您可以将其附加到文档中。如果您确实需要一串 HTML，那么您可以:

var htmlString = $("<div />").append($input).html();

---

var valueString = "Example\" input' with special < characters >";
var $input = $("<input />", {
  type: "hidden",
  name: "class",
  value: valueString,
  id: "class"
});
var htmlString = $("<div />").append($input).html();
alert(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>