Question

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

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

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

如果我用双引号（“）替换撇号（'），那么当变量包含双引号（”）时会出现问题。

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>

Answer 2

尝试与single quote，

正确连接

valueString = valueString.replace('/"/',"&#34;")
var htmlString = '<input type="hidden" id="class" name="class" value="'+ valueString +'" />';

作为新问题的解决方案，您必须使用相关html number替换引号。为了替换它，简单的/"/正则表达式将有所帮助。如果要替换所有实例，只需在正则表达式的末尾添加g。

Answer 3

以下列格式使用

var valueString = $("#className").val();

$('<input />').attr('type','hidden').attr('id','class').attr('value',valueString).addClass('class');

做了你想要做的事情，比如添加到dom或需要html和其他任何东西

使用javascript添加HTML标记

3 个答案: