Question

HTML：

Input: <span id="form"></span>

使用Javascript：

var title = 'inside "<h1>outside?</h1>';
var inserted_data = '<input type="text" value=' + title + '>';
$("#form").html(inserted_data);

https://jsfiddle.net/uk7h8sw7/

结果很奇怪。 inside位于表单字段中，而outside位于表单字段之外。标签几乎完全丢失。

如何逃避双引号和HTML标记，以免这样搞砸？

Answer 1

您错过了value属性的引号：

value=' + title + '

请改用：

 value=\'' + title + '\'

var title = 'inside "<h1>outside?</h1>';
var inserted_data = '<input type="text" value=\'' + title + '\'/>';
$("#form").html(inserted_data);

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

已编辑：2017年4月16日，下午12:52 IST

更合适的解决方案：

var titles = ['inside "<h1>outside?</h1>', 'inside\'>out'];

$.each(titles, function(_, title) {
  $('<input>').prop({
    'type': 'text',
    'value': title
  }).appendTo('#form');
});

input {
  margin: 5px;
}

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

Answer 2

您可以使用jQuery(html, attributes)

＆＃13;

var title = 'inside "<h1>outside?</h1>';
var inserted_data = $("<input>", {
                      type:"text",
                      value:title
                    });
$("#form").html(inserted_data);

＆＃13;

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

＆＃13;

你如何使用jquery逃避表单元素中的双引号和html标签？

2 个答案: