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

こんにちは（・∀・）

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

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

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

text()

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

HTML

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

JavaScript

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

Result

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

html()

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

HTML

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

JavaScript

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

Result

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

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

HTML

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

JavaScript

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

Result

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

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

append()

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

HTML

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

JavaScript

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

Result

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

prepend()

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

HTML

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

JavaScript

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

Result

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

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

before()

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

HTML

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

JavaScript

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

Result

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

after()

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

HTML

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

JavaScript

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

Result

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

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

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

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を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をdiv要素で囲いました。

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