jqueryでhtmlの書き換えを行う方法

jqueryでhtmlを書き換える方法はいろいろとあります。

テキストを書き換える方法

$("セレクター").text("書き換え");

例えば、フリーランスをデザイナーに書き換える

<p class="text">フリーランス</p>

jqueryのタグは

$("p.text").text("デザイナー");

すると

<p class="text">デザイナー</p>

になります。

htmlタグごと書き換える方法

$("セレクター").html("書き換え");

例えば、pタグのフリーランスをh3タグのデザイナーに変更します。

<p class="text">フリーランス</p>

jqueryのタグは

$("p.text").html("<h3>デザイナー</h3>");

すると

<h3>デザイナー</h3>

にかわります。

htmlの追加

指定した要素内部の先頭に追加する方法

$("セレクター").prepend("書き換え")

例えば、フリーランスの前にすごいを追加する

<p class="text">フリーランス</p>

jqueryのタグは

$("p.text").prepend("<strong>すごい</strong>");

すると

<p class="text"><strong>すごい</strong>フリーランス</p>

にかわります。

指定した要素内部の最後に追加する方法

$("セレクター").append("書き換え")

例えば、フリーランスの後ろにすごいを追加する

<p class="text">フリーランス</p>

jqueryのタグは

$("p.text").append("<strong>すごい</strong>");

すると

<p class="text">フリーランス<strong>すごい</strong></p>

にかわります。

指定した要素の前に追加する方法

$("セレクター").before("書き換え")

例えば、フリーランスの前にデザイナーを追加する

<p class="text">フリーランス</p>

jqueryのタグは

$("p.text").before("<h3>デザイナー</h3>");

すると

<h3>デザイナー</h3>
<p class="text">フリーランス</p>

にかわります。

指定した要素の後に追加する方法

$("セレクター").after("書き換え")

例えば、フリーランスの後にデザイナーを追加する

<p class="text">フリーランス</p>

jqueryのタグは

$("p.text").after("<h3>デザイナー</h3>");

すると

<p class="text">フリーランス</p>
<h3>デザイナー</h3>

にかわります。


コメントする