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

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

【jQuery】 htmlを操作するメソッド

htmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。

htmlメソッド

  • $('').html();
    HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。
  • $('').text();
    HTML要素内文字列を取得または書き換え。何があっても、HTMLタグは反映されず、文字列として処理される。
  • $('').val();
    input要素から値を取得または書き換え。
  • $('').attr();
    HTML要素の属性名を指定して値を取得または書き換え。
  • $('').prepend();
    要素の先頭にHTML要素を追加。
  • $('').append();
    要素の最後にHTML要素を追加。
  • $('').before();
    要素の前にHTML要素を挿入。
  • $('').after();
    要素の後にHTML要素を挿入。
  • $('').empty();
    子要素をすべて削除。
  • $('').remove();
    要素をすべて削除。

 

実行例(ソース)

文字列を取得(.htmlまたは.text)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:文字列を取得する</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){

  alert($('#first').html());

});
</script>
</head>
<body>
<p id="first">ネコが夜鳴きをしている</p>
</body>
</html>

結果:
f:id:game-web-design:20141007120759p:plain
取得した文字列をアラートで表示しています。

 

文字列の書き換え(htmlタグを反映させるなら.html、文字通りの文字列のみ書き換えなら.text)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:文字列を取得する</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){

  $('#first').html('<small>起きたらネコに挟まれて寝ていた。</small>');

});
</script>
</head>
<body>
<p id="first">ネコが夜鳴きをしている</p>
</body>
</html>

結果:
f:id:game-web-design:20141007121207p:plain
.htmlを使っているのでsmallタグが反映されています。
.textを使っていたらな「起きたらネコに挟まれて寝ていた。」とブラウザに表示されます。

 

文字列取得した上で書き換え

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSSの操作</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p id="first">私はネコだった</p>
<p id="second">私はPCゲーマーだ</p>


<script>
$(function(){
$('p#second').text($('p#first').text());
});
</script>

</body>
</html>

結果:
f:id:game-web-design:20141007121705p:plain
#firstを取得した上で#secondは書き換えられています。

 

文字列を追加する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSSの操作</title>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p id="first">PCゲーマーです。</p>
<p id="second">ネコでもあります。</p>


<script>
$(function(){
$('p#first').prepend('<strong>先頭に挿入</strong>');
$('p#second').append('<strong>最後に挿入</strong>');
$('p#first').before('<h1>前に挿入</h1>');
$('p#second').after('<h2>後ろに挿入</h2>');
});
</script>

</body>
</html>

結果:
f:id:game-web-design:20141007122036p:plain
それぞれ指定した位置に文字列が挿入されていることが分かります。