こんにちは。to-Rの西畑です。jQueryによるJavaScript入門第15回はHTMLの挿入について解説したいと思います。
htmlの制御では指定した要素の内側のHTMLを変更する方法を解説しましたが、今回は追加です。
append
appendは指定した要素の最後にHTMLを追加する為の関数です。
$("指定した要素").append("追加するHTML") |
サンプルではボタンがクリックされた際にul要素の最後にappendという中身のli要素を追加しています。
$(function(){ $("input[value=append]").click(function(){ $("ul").append("<li>append</li>") }) }); |
prepend
prependは指定した要素の最初にHTMLを追加する為の関数です。
$("指定した要素").prepend("追加するHTML") |
after
afterは指定した要素の後ろにHTMLを追加する為の関数です。
$("指定した要素").after("追加するHTML") |
サンプルではul要素の後ろにp要素を追加しています。
$("ul").after("<p>after</p>") |
before
beforeは指定した要素の前にHTMLを追加する為の関数です。
$("指定した要素").before("追加するHTML") |
サンプルではul要素の前にp要素を追加しています。
$("ul").before("<p>before</p>") |
いやぁ、なんだか第1回から第15回までスムーズに誘導されてしまい、
気付けば1日でjQueryの大枠をつかむことができていました。
進度もちょうどよく、お金を払いたくなるぐらい(笑)スバラシイ講座でした。
本当にありがとうございました!