jQuery でHTMLの操作 1

jQueryでHTMLの操作について記載いたします。

1.テキストの変更

HTML要素に含まれるテキストを変更または取得するためにtext()を使います。

HTML

<p id="first">変更前</p>

text()を使ってテキストを変更するにはtext(...)の内側に変更後のテキストを記述します。テキストはダブルクォーテーションで囲みます。

jQuery

$("p#first").text("変更後");

2.テキストの取得

text()のかっこ内に何も記述しない場合はセレクターで指定した要素に含まれるテキストを取得できます。

jQuery

$("p#first").text();

id属性に「first」が設定されているp要素のテキストを取得できます。

HTML

    <p id="first">取得する文字列</p>
    <p id="second">変更前</p>

jQuery

$("p#second").text($("p#first").text());

$("p#first").text()　で　

<p id="first">～</p>

内のテキストを取得して $("p#second").text(...)で

<p id="second">～</p>

内を取得したテキストで買い換えます。

3.HTMLの変更

HTMLを変更するには、html(...)の内側に変更後のHTMLを記述します。

HTML

<p id="first">変更前</p>

jQuery

$("p#first").html("<h3>変更後</h3>");

id属性に「first」が設定されているp要素の内容が

<h3>変更後</h3>

に変更されます。

といった形で今後も引き続きjQueryで試したことをまとめてブログに記載したいと思います。