テキストの取得・変更

2015年8月3日

HTMLファイルに含まれるテキストをjQueryで
取得・変更するには、text()という命令を使用します。

テキストの取得

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

サンプルコードの３１行目をみると
$("#test1").text()
と書かれていて、そこでHTMLの<p id="#test1">の
「試しに何かを書いてみる。」を取得しています。

テキストの変更

３４行目で「試しに何かを書いてみる。」を
「変更完了！」と文字に変えています。

３５行目は何も書かれていない物を
「文字を追加する。」と文字に変えています。

このようにtext("何かしらの文字")で
文字を追加することができます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        margin:0 auto;}
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

    <p id="test1">試しに何かを書いてみる。</p>
    <p id="test2"></p>
</div><!--contatiner-->

<script>
$(document).ready(function(){
    
    //ブラウザのconsoleの箇所に値を出力する命令
    console.log( $("p#test1").text() );
    
    //実際に文字を変える命令
    $("p#test1").text("変更完了！");
    $("p#test2").text("文字を追加する。");
});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

margin:0 auto;}

</style>

</head>

<body>

<p id="test1">試しに何かを書いてみる。</p>

</div>

$(document).ready(function(){

//ブラウザのconsoleの箇所に値を出力する命令

console.log( $("p#test1").text() );

//実際に文字を変える命令

$("p#test1").text("変更完了！");

$("p#test2").text("文字を追加する。");

});

</script>

</body>

</html>

console.logについて

サンプルコードの31行目の
console.log()と命令ですが、
これはブラウザの「console」という
箇所に値や文字を出力するための命令です。

確認方法は、Chromeだとブラウザを立ち上げ
このサンプルコードのファイルを読み込んで
F12ボタンを押します。その後に
「Elements」「Network」といった窓がでます。
そこの「console」タブをクリックすると
「試しに何かを書いてみる。」と変更前の
テキストが表示されているのが分かります。

動作確認時に使用することもあるので
覚えておくといいかもしれません。