javascript - jqueryを使用して、別のhtml要素の開始タグと終了タグの間にhtml要素を挿入するにはどうすればよいですか

Question

私はテキストボックスを持っています:

    <input type="text"></input>

以下のように jquery を使用して入力要素間にスパンを追加したい:

    <input type="text"><span>Added span</span></input>

どうすればそれを達成できますか？

Answer 1

次の 3 つの質問にお答えします。

要素に HTML を追加する方法は?

jQuery を使用します。$('div').append('<span>Added span</span>');

入力要素にプレースホルダーを追加するには?

次のマークアップを使用します: <input type="text" placeholder="My placeholder" />(ブラウザのサポート: http://caniuse.com/input-placeholder )

入力にデフォルトでテキストを追加する方法は?

次のマークアップを使用します。<input type="text" value="My text" />

Answer 2

<span>(または任意の要素) をテキスト入力に入れることはできません。このフィドルを見てください：http://jsfiddle.net/GAFTk/

ブラウザは次のように変更します。

<input type="text" /><span>Text</span>

それらを並べてレンダリングします。

Answer 3

入力要素内に html 要素を配置したくないが、一般的には jQuery.append() を使用する

<div id="demo"></div>
<script>$("#demo").append("<span>added span</span>");</script>

結果：

<div id="demo"><span>added span</span></div>

他の何かを追加しても、既にそこにあるものは削除されません。

<script>$("#demo").append("<span>another</span>");</script>

<div id="demo"><span>added span</span><span>another</span></div>

すでに入っているものを上書きしたい場合は、.append の代わりに .html を使用するか、.empty を使用してから .append を使用します。

Answer 4

$('#inputId').innerHtml('<span>adding span</span>');

Answer 5

初め：

<input id="inserthere" type="text"></input>

それから：

$('#inserthere').innerHtml('<span>Added span</span>');

結果：

<input id="inserthere" type="text"><span>Added span</span></input>

編集：何かを上書きする代わりに追加したい場合は、jQueryの「追加」メソッドも使用できることをほとんど忘れてください！