Javascript 涉及引号时动态生成HTML

我有以下脚本：

function Start() {

    var TheData = 'tes"sst3\'k';

    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" value="';
    TheHTML += TheData + '" />';

    $('#Dynamic').html(TheHTML);
}

函数开始（）{
变量数据='tes“sst3'k'；
var TheHTML=''+TheData+''；
HTML+=''；
$（'#Dynamic'）.html（TheHTML）；
}

基本上，我正在动态创建HTML，并在其中嵌入一些可变文本。问题是文本包含引号，文本框的值由于引号而与标签的值不匹配。我如何解决这个问题

JSFIDLE是

---

谢谢

因为您正在使用jQuery，所以不用担心转义字符串，只需执行以下操作：

$(Start);
function Start() {
    var TheData = 'tes"sst3\'k';
    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" />';
    $('#Dynamic').html(TheHTML);
    $('#TheTextBox').val(TheData);
}

$（开始）；
函数Start（）{
变量数据='tes“sst3'k'；
var TheHTML=''+TheData+''；
HTML+=''；
$（'#Dynamic'）.html（TheHTML）；
$（“#文本框”）.val（数据）；
}

---

因为您使用的是jQuery，所以不必担心转义字符串，只需执行以下操作：

$(Start);
function Start() {
    var TheData = 'tes"sst3\'k';
    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" />';
    $('#Dynamic').html(TheHTML);
    $('#TheTextBox').val(TheData);
}

$（开始）；
函数Start（）{
变量数据='tes“sst3'k'；
var TheHTML=''+TheData+''；
HTML+=''；
$（'#Dynamic'）.html（TheHTML）；
$（“#文本框”）.val（数据）；
}

让jQuery担心所有这些并生成

HTML

这样更安全（正是出于这个原因）：

var $input = $("<input>").attr("id","TheTextBox").val(TheData);
var $div = $("<div>").addClass("SomeClass").text(TheData).append($input);

var $wrapper = $("<div>").append($div);
var TheHTML = $wrapper.html();

var TheData = 'tes"sst3'k';

var$input=$（“”）attr（“id”，“TheTextBox”）.val（TheData）；
var$div=$（“”）。addClass（“SomeClass”）。text（TheData）。append（$input）；
var$wrapper=$（“”）。append（$div）；
var TheHTML=$wrapper.html（）；

让jQuery担心这一切并生成

HTML

这样更安全（正是出于这个原因）：

var $input = $("<input>").attr("id","TheTextBox").val(TheData);
var $div = $("<div>").addClass("SomeClass").text(TheData).append($input);

var $wrapper = $("<div>").append($div);
var TheHTML = $wrapper.html();

var TheData = 'tes"sst3'k';

var$input=$（“”）attr（“id”，“TheTextBox”）.val（TheData）；
var$div=$（“”）。addClass（“SomeClass”）。text（TheData）。append（$input）；
var$wrapper=$（“”）。append（$div）；
var TheHTML=$wrapper.html（）；

您可以对引号进行编码，如下所示：

var $input = $("<input>").attr("id","TheTextBox").val(TheData);
var $div = $("<div>").addClass("SomeClass").text(TheData).append($input);

var $wrapper = $("<div>").append($div);
var TheHTML = $wrapper.html();

var TheData = 'tes"sst3'k';

---

您可以对引号进行编码，如下所示：

var $input = $("<input>").attr("id","TheTextBox").val(TheData);
var $div = $("<div>").addClass("SomeClass").text(TheData).append($input);

var $wrapper = $("<div>").append($div);
var TheHTML = $wrapper.html();

var TheData = 'tes"sst3'k';

这是你的答案

$(Start);

function Start() {

    var TheData = 'tes"sst3\'k';

    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" value=';
    TheHTML += TheData + ' />';

    $('#Dynamic').html(TheHTML);
}

$（开始）；
函数Start（）{
变量数据='tes“sst3'k'；
var TheHTML=''+TheData+''；
HTML+=''；
$（'#Dynamic'）.html（TheHTML）；
}

这是你的答案

$(Start);

function Start() {

    var TheData = 'tes"sst3\'k';

    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" value=';
    TheHTML += TheData + ' />';

    $('#Dynamic').html(TheHTML);
}

$（开始）；
函数Start（）{
变量数据='tes“sst3'k'；
var TheHTML=''+TheData+''；
HTML+=''；
$（'#Dynamic'）.html（TheHTML）；
}

您需要转义文本。问题是文本框中的

值使用双引号，因此
数据中的双引号将在
tes
后结束值。要转义属性中的引号，请使用
“
。但是，如果使用方法设置值而不是字符串串联，则不需要转义。需要转义文本。问题是文本框中的
值
使用双引号，因此
数据
中的双引号将在
tes
后结束值。要转义属性中的引号，请使用
“
。但是，如果使用方法而不是字符串连接来设置值，则不需要转义它。仅供参考，您还可以使用此表单创建具有属性和值的元素：
$（“”，{id:“TheTextBox”，val:TheData}）我相信。另外，我看不出最后使用
$wrapper.html（）
的原因。只需执行
$（'#Dynamic'）.empty（）.append（$div）
。我有一个后续的jsFiddle：这能解决问题吗，还是有一个我没有想到的边缘情况？仅供参考，您还可以使用此表单创建具有属性和值的元素：
$（“”，{id:'TheTextBox'，val:TheData}）我相信。另外，我看不出最后使用
$wrapper.html（）
的原因。只需执行
$（'#Dynamic'）.empty（）.append（$div）
。我有一个后续的JSFIDLE：这能解决问题吗？还是有一个我没有想到的边缘情况？好的，谢谢；我想这是唯一的办法；首先生成空白HTML，将其添加到DOM中，然后填充值；我想这是唯一的办法；首先生成空白HTML，将其添加到DOM中，然后填充值？