jQuery場所を選んでHTMLを追加する書き方
今回は、jQuery場所を選んでHTMLを追加する書き方について、詳しく記載してみようと思います。
「jQueryを使うとHTMLを追加することができるの？」や「HTMLを追加する場所ってどういう書き方？」とお思いの初心者の方も多いことと思います。今回の内容では、適切なメソッドを選んで、思った所に指定したHTMLが追加できるようになることと思います。
という事で、それでは今回はッ、
- ・HTMLを先頭に追加:prepend()メソッド
- ・HTMLを最後に追加:append()メソッド
- ・指定した要素の前に追加:before()メソッド
- ・指定した要素の後に追加:after()メソッド
- ・指定した要素を包む:wrap()メソッド
- ・要素を削除:remove()メソッド
上記について記載していこうと思います…。
HTMLを先頭に追加:prepend()メソッド
指定した場所にHTMLを追加するメソッドの書き方を記載していきます。
追加する場所を適格に指定して、適切なメソッドを選べば、思った所に指定したHTMLを追加することが可能になります。
まず初めにprepend()メソッド、こちらは指定した要素の中の先頭にHTMLを追加するメソッドになります。さっそくサンプルを記載してみます。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).prepend(“<li>jQuery</li>”);
});
</script>
</head>
<body>
・・省略・・
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
</ol>
・・省略・・
</body>
</html>
- 1.jQuery
- 2.HTML
- 3.CSS
HTMLでは、リスト内には「HTML」と「CSS」という2つしか記述されていませんが、prepend()メソッドでol要素内の先頭に、<li>jQuery</li>を追加しています。
<li>jQuery</li>
<li>HTML</li>
<li>CSS</li>
</ol>
HTMLを最後に追加:append()メソッド
append()メソッドは、prepend()メソッドの逆で、先頭ではなく最後に追加するためのメソッドになります。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).append(“<li>jQuery</li>”);
});
</script>
</head>
<body>
・・省略・・
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
</ol>
・・省略・・
</body>
</html>
- 1.HTML
- 2.CSS
- 3.jQuery
上記のように、一番最後に要素が追加されることになります。また、HTMLも同様でリストの最後に追加されることとなります。
指定した要素の前に追加:before()メソッド
prepend()は、指定した要素内の一番初めに追加するメソッドでしたが、before()メソッドは、指定した要素の前に追加するメソッドです。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).before(“<h2>jQueryを学習したい！</h2>”);
});
</script>
</head>
<body>
・・省略・・
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
・・省略・・
</body>
</html>
jQueryを学習したい！
- 1.HTML
- 2.CSS
- 3.jQuery
HTMLソースのol要素の前に、h2要素を追加しました。
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
指定した要素の後に追加:after()メソッド
after()メソッドは、before()メソッドの逆で、指定した要素の後ろに追加するメソッドです。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).after(“<p>jQueryのメソッドをもっと詳しく！</p>”);
});
</script>
</head>
<body>
・・省略・・
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
・・省略・・
</body>
</html>
- 1.HTML
- 2.CSS
- 3.jQuery
jQueryのメソッドをもっと詳しく！
HTMLソースのol要素の後ろに、p要素を追加しました。
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
<p>jQueryのメソッドをもっと詳しく！</p>
指定した要素を包む:wrap()メソッド
wrap()メソッドを使うと、要素を新たな要素で包み込むことができます。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).wrap(‘<div id=”wrapper”></div>’);
});
</script>
</head>
<body>
・・省略・・
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
・・省略・・
</body>
</html>
- 1.HTML
- 2.CSS
- 3.jQuery
HTMLソースのol要素をdiv要素で包んでみました。
wrap()メソッドでは、包みたい要素を<div></div>のように、空で記述します。
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
</div>
要素を削除:remove()メソッド
remove()メソッドを使うと、要素自体を削除することができます。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list li:last-child”).remove();
});
</script>
</head>
<body>
・・省略・・
<ol id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ol>
・・省略・・
</body>
</html>
- 1.HTML
- 2.CSS
<li>HTML</li>
<li>CSS</li>
</ol>
3つあったli要素が削除されて2つになっています。
という事で今回は、jQuery場所を選んでHTMLを追加する書き方につきまして、サンプルコードを交え記載してみました。
比較的簡単な内容でしたが、理解するのは簡単ですが、覚えるとなると使用頻度が少ないため難しいことと思います。また、覚える必要もないかもしれませんが、まれにjQueryのプラグインを少しカスタマイズする際など使用することがございます。なので、使用方法の理解だけはしっかりとておくことをオススメします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
