如何在插入输入值时避免HTML文本中断？

Question

我想用一些html文本替换我隐藏的输入值，并将其作为纯文本发送到服务器。这就是我的表现：

$('#div').append("<input type="hidden" value='<div><h1>Some text</h1><svg ...></svg></div>'");

问题是代码断开并将输入的值作为HTML标记显示在我的模板中，这使得它在发送时无法用于后端。

这里是jsfiddle：https://jsfiddle.net/Lindow/9p77afc3/2/，在检查你时会发现svg已经超出了输入值，这就是我所做的事情。试图避免。

如何解决此问题？

Answer 1

您的input元素未隐藏。为其提供type="hidden"属性。

在您将此问题添加到您的问题后，您遇到了无法转义引号的问题。用反斜杠转义那些内部双引号，或使用单引号：

$('#div').append("<input type='hidden' value='<div><h1>Some text</h1><svg ...></svg></div>'");

在下一次添加小提琴的编辑后，它会显示svg内容中有单引号，并且您没有引用value属性的值。

这样做：

$('.elements').append("<div>hey : <input hidden value=\"" + "<svg ... </svg>" + "\"</div>");
//                                                    ^^                         ^^

更正小提琴：https://jsfiddle.net/9p77afc3/4/

Answer 2

需要更改单引号而不是双引号。 请尝试以下：

$('#div').append("<input type='hidden' value='<div><h1>Some text</h1><svg ...></svg></div>'");