jqueryを使用したHTMLの書き換え

テキストの書き換え $(“セレクター”).text(“書き換え”);
<p class="test">テキスト</p>

$("p.test").text("新しいテキスト");
  HTMLタグの追加 $(“セレクター”).html(“タグ”);
<p class="test">テキスト</p>

$("p.test").html("<h3>新しいテキスト</h3>");
  HTMLの追加 指定した要素の先頭に追加 $(“セレクター”).prepend(“書き換え”);
<p class="test">テキスト</p>

$("p.test").prepend("新しいテキスト");
指定した要素の最後に追加 $(“セレクター”).append(“書き換え”);
<p class="test">テキスト</p>

$("p.test").append("新しいテキスト");
指定した要素の前に追加 $(“セレクター”).before(“書き換え”);
<p class="test">テキスト</p>

$("p.test").before("新しいテキスト");
指定した要素の後に追加 $(“セレクター”).after(“書き換え”);
<p class="test">テキスト</p>

$("p.test").after("新しいテキスト");
  要素の削除 $(“セレクター”).remove();
<p><h3>テキスト</h3></p>

$("p h3").remove();
  属性値の変更 $(“セレクタ”).attr(“属性名”,”値”);
<img src="before.jpg">

$("img").attr("src","after.jpg");
複数の属性値を同時に変更したい場合は、$(“セレクタ”).attr({“src”:”after.jpg” , “~”:”~” , “~”:”~”});のように書くことで同時に書き換えることができます。   属性の削除 $(“セレクタ”).removeAttr(“属性名”);
$("img").removeAttr("border");
  属性のスタイル変更 $(“セレクタ”).css(“属性名”,”値”);
<p class="test">テキスト</p>

$(".test").css("color","red");
複数の属性値を同時に変更したい場合は、$(“セレクタ”).css({“color”:”red” , “~”:”~” , “~”:”~”});のように書くことで同時に書き換えることができます。   CSSの追加と削除 $(“セレクタ”).addClass(“CSS名”); $(“セレクタ”).removeClass(“CSS名”);
$(".test").addClass("test2");

$(".test").removeClass("test3");
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です