【jQuery】 htmlを操作するメソッド2（HTMLの移動）

【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録
HTMLの移動を行うメソッドについて学んでいきます。
　

要素内の前か後ろに移動

prependTo（前）とappendTo（後）を使うことによって、別な要素内にHTMLを移動させることができます。

<p id="first">テキストテキスト</p>
<strong>先頭に移動</strong>
<script>
$(function(){
$('strong').prependTo('p');
});
</script>

結果：

p要素内の先頭にstrong要素が移動しています。

要素の前か後ろに移動

insertBefore（前）とinsertAfterを使うことによって、別な要素の前後にHTMLを移動させることができます。

<p>テキストテキスト</p>
<h1>前に移動</h1>
<script>
$(function(){
$('h1').insertBefore('p');
});
</script>

結果：

p要素の前にh1要素が移動しています。

違う要素で囲む

wrap（指定）またはwrapAll（全部）で指定した要素の外側に別の要素に変えることができます。

<strong>テキスト</strong>
<strong>テキスト</strong>
<script>
$(function(){
$('strong').wrap('<h2></h2>');
});
</script>

結果：

h2要素が親要素に変わっています。

指定した要素の子要素を変える

wrapInnerで要素内の子要素を変えることができます。

<p>テキスト</p>
<p>テキスト</p>
<script>
$(function(){
$('p').wrapInner('<strong></strong>');
});
</script>

結果：

p要素内の子要素（この場合ないが）がstrong要素に変わっている。

指定した親要素を削除する

unwrapで指定した親要素を削除することができます。

<h1><strong>テキスト</strong></h1>
<script>
$(function(){
$('strong').unwrap('');
});
</script>

結果:

h1要素が削除されstrong要素のみ残っています。

要素の置き換え

replaceWithで指定した要素を置き換えることができます。

<p>置き換え前</p>
<script>
$(function(){
$('p').replaceWith('<h1>置き換え後</h1>');
});
</script>

結果：

「置き換え前」から「置き換え後」に置き換わっています。

要素の削除

removeで指定した要素を削除することができます・

<p><strong>削除する要素</strong>テキスト</p>
<script>
$(function(){
$('p strong').remove();
});
</script>

結果：

p要素内のstrong要素が削除されています。

属性の書き換え

attrで要素に含まれる属性を書き換えることができます。

<p><a href="http://yahoo.co.jp/">テキスト</a></p>
<script>
$(function(){
$('a').attr('href','http://google.co.jp/');
});
</script>

結果：
yahooからgoogleにURLが変更されています。

属性の取得

同様にattrで属性を取得することができます。

<p><a href="http://google.co.jp/">テキスト</a></p>
<script>
$(function(){
$('a').text($('a').attr('href'));
});
</script>

結果：

a要素のhref属性を取得し、textメソッドで置き換えています。

属性の削除

removeAttrで属性を削除することができます。

<p><a href="http://google.co.jp/" target="_blank">テキスト</a></p>
<script>
$(function(){
$('a').removeAttr('target');
});
</script>

結果：
target属性が削除され、リンクを押してページが切り替わらずそのままページ移動します。

クラスの追加

addClassで要素にクラスを追加することができます。

CSS

.red {
  color:red;
}

HTML

<script>
<p>テキストテキストテキストテキストテキスト</p>
$(function(){
$('p').addClass('red');
});
</script>

結果：

p要素にクラスredがついたため、テキストが赤くなっている。

クラスの削除

removeClassで指定した要素のクラスを削除することができます。

CSS

.red {
  color:red;
}

HTML

<script>
<p class="red">テキストテキストテキストテキストテキスト</p>
$(function(){
$('p').removeClass('red');
});
</script>

結果：

p要素のクラスredが削除されたため、テキストの色がデフォルトに戻っています。