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のプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2013-12-27
