menu
menu

キーワード検索

 

前月(5月)の人気記事トップ10 - 6/3/2019

  1. ( 3 ↑) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 1 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 8 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. (圏外↑) 【制作Tips】画面解像度一覧表
  7. ( 10 ↑) 【制作Tips】iPad画面解像度まとめ
  8. (圏外↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  9. ( 9 - ) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 6 ↓) 【決定版】フォントの設定はこれで決まり❗️
このエントリーをはてなブックマークに追加

【jQuery】入門14. jQueryで文字や画像を表示する

【jQuery】入門14. jQueryで文字や画像を表示する

こんにちは(・∀・)

今日はjQueryでHTMLの要素に文字や画像を表示する方法をご紹介します。

jQueryでWebページに文字や画像を表示する

HTMLの要素に文字や画像を表示させる方法です。

text()

text()を使って要素内に文字を表示させる方法。

HTML

<p id="demo1">demo1</p>
JavaScript

<script>
$('#demo1').text('hoge1');
</script>
Result
demo1

 

demo1がhoge1に書き換えられました。

 

html()

html()で要素ごと表示させる方法。

HTML

<p id="demo2">demo2</p>
JavaScript

<script>
$('#demo2').html('<b>hoge2</b>');
</script>
Result
demo2

 

demo2がhoge2に書き換えられ文字がb要素で太く表示されました。

 

画像を表示させる場合は...

HTML

<p id="demo3">demo3</p>
JavaScript

<script>
$('#demo3').html('<img src="img.png" alt="サンプル画像">');
</script>
Result
demo3

 

demo3が画像に置き換えられました。

要素内の前後に挿入したい場合は次のようになります。

append()

append()で要素内の最後に表示。

HTML

<p id="demo4">demo4</p>
JavaScript

<script>
$('#demo4').append('<span>hoge4</span>');
</script>
Result
demo4

 

demo4の後ろにhoge4が挿入されました。

 

prepend()

prepend()で要素内の先頭に表示。

HTML

<p id="demo5">demo5</p>
JavaScript

<script>
$('#demo5').prepend('<span>hoge5</span>');
</script>
Result
demo5

 

demo5の前にhoge5が挿入されました。

 

要素外の前後に挿入したい場合は次のようになります。

before()

before()で自要素の前に表示。

HTML

<p id="demo6">demo6</p>
JavaScript

<script>
$('#demo6').before('<span>hoge6</span>');
</script>
Result
demo6

 

demo6の前にhoge6が挿入されました。

 

after()

after()で自要素の後ろに表示。

HTML

<p id="demo7">demo7</p>
JavaScript

<script>
$('#demo7').after('<span>hoge7</span>');
</script>
Result
demo7

 

demo7の後ろにhoge7が挿入されました。

 

表にするとこんな感じです。

append()
要素内の先頭に挿入
prepend()
要素内の最後に挿入
before()
自要素の前に挿入
after()
自要素の後ろに挿入

 

要素の中と外、前と後ろはこんな感じで覚えると良いかもしれません。


before()
<p>
append()
hogehoge
prepend()
</p>
after()

 

あともう一つだけ、wrap()をご紹介して終わります。

wrap()

wrap()で指定した特定の要素を囲みます。

HTML

<div class="sample-demo">
<p id="demo8-1">demo8-1</p>
<div id="demo8-2">demo8-2</div>
</div>
JavaScript

<script>
$('#demo8-1').wrap('<div style="color: red;"></div>');
</script>
Result

demo8-1

demo8-2

 

demo8-1をdiv要素で囲いました。

 

種類の違う子要素をまとめて囲う時はwrapInner()を使用します。

wrapInner()

wrapInner()で指定した子要素をまとめて囲みます。

HTML

<div class="sample-demo">
<p id="demo9-1">demo9-1</p>
<div id="demo9-2">demo9-2</div>
</div>
JavaScript

<script>
$('.sample-demo').wrap('<div style="color: red;"></div>');
</script>
Result

demo9-1

demo9-2

 

demo9-1とdemo9-2をdiv要素で囲いました。

 

以上jQueryで文字や画像を表示させる方法をご紹介しました。

  • after() append() before() HTML jQuery prepend() text() wrap() wrapInner()
このエントリーをはてなブックマークに追加