jQueryで要素を追加、変更方法

Javascript

2018/07/132023/01/29

jQueryで要素を追加する方法
今回は、jQueryを使い要素を追加してみたいと思います。DEMO

実際にボタンを押して要素を追加できたと思います！

<script>
/*要素を後ろに追加*/
$(".insertA").click(function(){
$(".sample1").after("<span style='color:dodgerblue;font-size:2.5em;'>▲</span>");
});
/*要素を前に追加*/
$(".insertB").click(function(){
$(".sample2").before("<span style='color:steelblue;font-size:2.5em;'>●</span>");
});
</script>

要素を追加する方法は、その他append()やprepend()があります。どちらも、使い方としては指定した要素の最初に要素追加を行うか、最後に要素追加を行うか指定することができます。afterやbeforeと使い方は似ていると思います！実際に使うことはあまりないと思うのですが、覚えておくと便利です。

また、 .html() .text() .val() を使うことによりテキストの変更等が可能になります。

<input value=”changeボタンをクリック”> の中身をボタンをクリックして変えたいと思います。

タグのvalueを変える方法として .val()を使ってみました。

$(".change_v").click(function(){
$(".changed_v").val("valueが変更されました！")
});

では、textの文字を変えてみたいと思います。

◯◯をにしてみる。
テキストを変える方法として .text()を使ってみました。

$(".change_t").click(function(){
$(".changed_t").text("××")
});

最後に一番便利だと思われる.html自体の変更を行ってみます。

$(".change_h").click(function(){
$(".changed_h").html("

びっくりされましたか？

記事の中身を丸ごと.html()を使って変えてみました！
“); });

.after() .before() .value() .text() .html() は使い方を覚えておくととても便利です。ぜひ参考にしてみてください！