jQueryでHTMLにテキストを追加するtext()や、要素ごと追加するhtml()、要素をコピーして追加するclone()を使った方法をご紹介します。
その他、要素の挿入や削除も併せてお伝えします。
目次
text() でHTML要素にテキストを追加
text()はHTML要素にテキストを追加したり、取得します。
<（小なり）などの記号はエスケープされ、HTMLエンティティ化されたテキストとなるため、タグなどは追加できません。
要素内のテキストを書き換える
<p>要素のテキストを書き換えるサンプルです。
HTML
|
1 2 3 4 |
<div> <button type="button">クリック！</button> <p>p要素1</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // 所定の要素のテキストを書き換える $('p').text('要素のテキストが書き換わりました。'); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
p要素1
テキストが書き換わりました。
html() でHTML要素ごと追加
html()は要素を追加したり、取得します。
新たに要素を追加する
<h2>要素内に新たに<a>要素を追加します。
<h2>要素のテキストは書き換えられます。
HTML
|
1 2 3 4 5 |
<div> <button type="button">クリック！</button> <h2>h2要素</h2> <p>p要素1</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // 所定の要素に新たな要素とテキストを追加する $('h2').html('<a href="#">h2要素にリンクタグが追加されました。</a>'); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
h2要素
p要素1
<h2>要素の文字が<a>要素に書き換わりました。
実際には以下のように指定要素内に<a>要素が追加され、元あったテキストは書き換えられています。
結果
<h2>h2要素</h2>
⇓
<h2><a href=”#”>h2要素にリンクタグが追加されました。</a></h2>
要素内を丸ごと書き換える
html()は指定要素内を丸ごと書き換えます。
HTML
|
1 2 3 4 5 |
<div> <button type="button">クリック！</button> <h2>h2要素</h2> <p>p要素1</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // 所定の要素に新たな要素とテキストを追加する $('div').html('<strong>div要素内を丸ごと書き換えました。</strong>'); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
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
|
1 2 3 4 5 |
<div> <button type="button">クリック！</button> <h2>h2要素</h2> <p><span>span要素1</span></p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // button要素をクリックしたら発動 $('button').click(function() { // 所定の要素のクローンを作成し、div要素の最後に追加 $('span').clone().appendTo('div'); }); }); |
結果（動作サンプル）
ボタンをクリックしてみてください。
h2要素
span要素1
クローンがどんどん作成され、追加されるかと思います(笑)
<span>要素が1つだと、1つコピーされ2つになり、次は2つの<span>要素をコピーするので4つになり、4つが8つに…とどんどん増えていきます。
該当する要素は全てクローン作成してしまうんですね。
実際、使ったことありません。。。
要素の前後や子要素に追加
子要素や要素の前後に追加するメソッドはよく使いますね。
以下のページで詳しく解説しています。
参考
HTML要素を削除
自要素や子要素を削除するメソッドもよく使います。
以下のページで詳しく解説しています。
