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>'");