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

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

<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ボタンをクリック”> の中身をボタンをクリックして変えたいと思います。

Change

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

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

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

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

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

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

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