jQueryでhtml()やtext()を使った追加方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでHTMLにテキストを追加するtext()や、要素ごと追加するhtml()、要素をコピーして追加するclone()を使った方法をご紹介します。

その他、要素の挿入や削除も併せてお伝えします。

 

text() でHTML要素にテキストを追加

text()はHTML要素にテキストを追加したり、取得します。

<(小なり)などの記号はエスケープされ、HTMLエンティティ化されたテキストとなるため、タグなどは追加できません。

要素内のテキストを書き換える

<p>要素のテキストを書き換えるサンプルです。

HTML

jQuery

結果(動作サンプル)

ボタンをクリックしてみてください。


p要素1

テキストが書き換わりました。

html() でHTML要素ごと追加

html()は要素を追加したり、取得します。

新たに要素を追加する

<h2>要素内に新たに<a>要素を追加します。

<h2>要素のテキストは書き換えられます。

HTML

jQuery

結果(動作サンプル)

ボタンをクリックしてみてください。


h2要素
p要素1

<h2>要素の文字が<a>要素に書き換わりました。

実際には以下のように指定要素内に<a>要素が追加され、元あったテキストは書き換えられています。

結果

<h2>h2要素</h2>

<h2><a href=”#”>h2要素にリンクタグが追加されました。</a></h2>

要素内を丸ごと書き換える

html()は指定要素内を丸ごと書き換えます。

HTML

jQuery

結果(動作サンプル)

ボタンをクリックしてみてください。


h2要素
p要素1

<div>要素内がまるっと書き換わりましたね。

実際には以下のように書き換えられています。

結果

<div>
<button type=”button”>クリック!</button>
<h2>h2要素</h2>
<p>p要素1</p>
</div>

<div>
<strong>div要素内を丸ごと書き換えました。</strong>
</div>

clone() で要素をコピーして追加

clone()はある要素のクローンを作成します。

要素のコピーなどで使えますね。

HTML

jQuery

参考:appendTo() で追加する

結果(動作サンプル)

ボタンをクリックしてみてください。

h2要素
span要素1

クローンがどんどん作成され、追加されるかと思います(笑)

<span>要素が1つだと、1つコピーされ2つになり、次は2つの<span>要素をコピーするので4つになり、4つが8つに…とどんどん増えていきます。

該当する要素は全てクローン作成してしまうんですね。

実際、使ったことありません。。。

要素の前後や子要素に追加

子要素や要素の前後に追加するメソッドはよく使いますね。

以下のページで詳しく解説しています。

参考

HTML要素を削除

自要素や子要素を削除するメソッドもよく使います。

以下のページで詳しく解説しています。

参考:jQueryで要素を削除する

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*