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>");
上記のコードではid="doc"のdivタグに対し "jQueryから設定した文章です。"のテキストを設定します。また、id="link"のdivタグに対し "http://www.ipentec.com" へのリンクを設定しています。セレクタの書式や一覧はこちらの記事を参照してください。
上記のHTMLファイルを表示すると下図の表示結果となります。idがないdivタグやid="title"のdivタグにはデフォルトの"空"文字が表示されていますが、id="doc, id="link"のdivタグにはコードから設定したテキストが反映されています。
