jquery - jQueryで(HTMLではなく)テキストを先頭に追加する方法は?

Question

次を使用して、要素の先頭に何かを追加できることに気付きました。

$(...).prepend(myText);

ただし、myTextたとえば、 の場合"<span>"、実際にはそのテキストを表示したいのですが、.prepend()代わりに空のスパン要素を先頭に追加します。これを解決するための推奨される方法は何ですか? テキストを手動でHTMLエスケープする必要がありますか、それとももっとエレガントなものがありますか?

Answer 1

テキストノードを作成し、そこにコンテンツを配置することができますprepend。

$('div').prepend(document.createTextNode("<span>"));

例： http： //jsfiddle.net/niklasvh/gCKHe/

Answer 2

textの代わりに関数を使用してprepend、元のテキストを新しいテキストの末尾に追加するだけです。

$("#elementID").text("<span>" + $("#elementID").text());

Answer 3

私の意見では、HTMLエンティティは問題ありません。

$(...).prepend('<span>');

http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cbにあるヒントを使用して、エンティティを自動化できます。

$(...).prepend($('<div/>').text('<span>').html());

PHPの関数htmlentitiesもJavascriptで作成する場合は、PHP-JSプロジェクトで入手可能なコードを使用できます：http：//phpjs.org/functions/htmlentities ：425

または、前のヒントを関数でラップすることで簡略化できます。

function htmlentities(string) {
  return $('<div/>').text(string).html();
}

どちらの場合も、次のようなhtmlentities関数を使用します。

$(...).prepend(htmlentities('<span>'));

Answer 4

この受け入れられた回答のように、HTML エンコード (およびデコード) 関数を実装できます: HTML-encoding lost when attribute read from input field

そして、次のようにします。

$(...).prepend(htmlEncode(myText));