HOME > > > jQueryを使ってブラウザにhtmlタグを含めた文字を表示する【Basics of jQuery (vol.2)】

jQueryを使ってブラウザにhtmlタグを含めた文字を表示する【Basics of jQuery (vol.2)】

jQueryを使ってブラウザにhtmlタグを含めた文字を表示する

jQueryを使ってテキストを表示してみる

htmlでタグを使って書けば普通に表示されるテキスト。
わざわざjQueryを使ってテキストだけ表示する事はほとんどありませんが、ではそらで書けるかと言われると自信が無い。。。javascriptは基本的に全部そうですが。
表示の基本ですので覚えておきます。

最初に

  • jQueryは設置済みとして書いております。
  • jsの記述は外部ファイルに記載して読み込こむ事を前程に書いております。

単純に書いたものを表示する

まずは書いたものをそのまま表示してみます。
htmlとjsは以下の通り。

html


<div id="TEST01"></div>

js


$(document).on('ready',function(){
 $("#TEST01").text("そのまま文字出力します");
});

表示サンプルはこちら

書いたまま表示されるので、htmlのタグを書いてもそのまま表示されます。

js


$(document).on('ready',function(){
 $("#TEST01").text("<p>そのまま文字出力します</p>");
});

表示サンプルはこちら

このままではhtmlは使えません。
単純に書いたものを出しているだけです。

ここでは「.text」(メソッド)を使いました

メソッド「.text」を使うと「実行内容に書かれた文章をそのまま表示する」という事になります。


$(document).on('ready',function(){
//HTMLや画像が読み込まれたら

 $("#TEST01").text("そのまま文字出力します");
 //ID「TEST01」の中に、書いてあるテキストを表示してね。

});

htmlタグを使ってテキストを表示する

今度はhtmlタグを反映させたテキストを表示させます。

html


<div id="TEST01"></div>

js


$(document).on('ready',function(){
 $("#TEST01").html("<b>タグで太文字にしたテキストを出力します</b>");
});

表示サンプルはこちら

今度は<b>タグが反映されており、出力文字が太くなっています。

ここでは「.html」(メソッド)を使いました

メソッド「.html」を使うと「実行内容に書かれた文章をhtml表示する」という事になります。


$(document).on('ready',function(){
//HTMLや画像が読み込まれたら

 $("#TEST01").html("<b>タグで太文字にしたテキストを出力します</b>");
 //ID「TEST01」の中に、書かれている文章をhtmlとして表示してね。

});

vol.2のまとめ

(”要素”).text()は入力内容をそのまま表示をしたい時。
(”要素”).html()はhtml表示をしたい時。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2016.04.05