PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

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


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

要素内の前か後ろに移動

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

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

結果:
f:id:game-web-design:20141014185707p:plain
p要素内の先頭にstrong要素が移動しています。


 

要素の前か後ろに移動

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

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

結果:
f:id:game-web-design:20141014185717p:plain
p要素の前にh1要素が移動しています。


 

違う要素で囲む

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

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

結果:
f:id:game-web-design:20141014185729p:plain
h2要素が親要素に変わっています。


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

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

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

結果:
f:id:game-web-design:20141014185743p:plain
p要素内の子要素(この場合ないが)がstrong要素に変わっている。


 

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

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

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

結果:
f:id:game-web-design:20141014185752p:plain
h1要素が削除されstrong要素のみ残っています。


 

要素の置き換え

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

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

結果:
f:id:game-web-design:20141014185803p:plain
「置き換え前」から「置き換え後」に置き換わっています。


 

要素の削除

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

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

結果:
f:id:game-web-design:20141014185814p:plain
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>

結果:
f:id:game-web-design:20141014185826p:plain
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>

結果:
f:id:game-web-design:20141014185838p:plain
p要素にクラスredがついたため、テキストが赤くなっている。

クラスの削除

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

CSS

.red {
  color:red;
}

HTML

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

結果:
f:id:game-web-design:20141014185849p:plain
p要素のクラスredが削除されたため、テキストの色がデフォルトに戻っています。

広告を非表示にする