jQuery のセレクタを用いて要素内のドキュメント/テキストを変更する

このページのタグ:[JavaScript] [jQuery]
jQuery のセレクタを用いて要素内のドキュメントやテキストを変更するコードを紹介します。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div#doc").html("jQueryから設定した文章です。");
      $("div#link").html("<a href=\"http://www.ipentec.com/\">リンクです。</a>");
    })
  </script>
</head>
<body>
  <div>空</div>
  <div id="title">空</div>
  <div id="doc">空</div>
  <div id="link">空</div>
</body>
</html>

解説


  $(document).ready(function () {
  }
の部分はページ表示後にコードを実行するための関数です。詳しくはこちらの記事を参照してください。


  $("div#doc").html("jQueryから設定した文章です。");
  $("div#link").html("<a href=\"http://www.ipentec.com/\">リンクです。</a>");
上記がHTMLのテキストを編集するコードになります。テキストを変更する書式は以下になります。
$(セレクター).html("(タグの内部に設定するテキスト)";
上記のコードではid="doc"のdivタグに対し "jQueryから設定した文章です。"のテキストを設定します。また、id="link"のdivタグに対し "http://www.ipentec.com" へのリンクを設定しています。セレクタの書式や一覧はこちらの記事を参照してください。

実行結果

上記のHTMLファイルを表示すると下図の表示結果となります。idがないdivタグやid="title"のdivタグにはデフォルトの"空"文字が表示されていますが、id="doc, id="link"のdivタグにはコードから設定したテキストが反映されています。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)