如何避免插入輸入值時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>'");