【javaScript・jQuery】動的に追加したhtmlタグがタグとして認識されず、文字として表示されてしまう。
javaScriptやjQueryを使って、動的にhtmlのタグを追加するときってありますよね。
そんな時に、何も考えずにどこかのサイトからコピペしたソースコードを貼ると、
htmlタグがタグではなく、文字として表示されてしまう…
なんてことがあると思います。
例えば、
「こんにちは」という文字に、「<br>よろしく」という文字をjavaScriptで動的に追加すると、
使う関数によって、
「こんにちは
よろしく」
と２行になったり、
「こんにちは<br>よろしく」
とタグが文字列として表示されたりします。
この二つの違いは、
文字列の出力の際に、「text」と「html」のどちらを使うかで異なります。
「html」の場合はhtmlタグはタグとして認識されます。
「text」の場合は、htmlタグは文字として認識され、
＜サンプル＞
| ここにhtmlで出力 | htmlで出力 |
| ここにtextで出力 | textで出力 |
サンプルのソースコードを紹介します。
[index.html]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 26.7947%;">ここにhtmlで出力</td>
<td style="width: 73.2053%;"><span id="html">htmlで出力</span></td>
</tr>
<tr>
<td style="width: 26.7947%;">ここにtextで出力</td>
<td style="width: 73.2053%;"><span id="text">textで出力</span></td>
</tr>
</tbody>
</table>
<button onclick="result()">出力する</button>
<script src="index.js"></script>[index.js]
function result() {
if ($('button').text() == '戻す') {
$('#html').text('htmlで出力');
$('#text').text('textで出力');
$('button').text('出力する');
} else {
var addText = 'さて、<br> 改行されたかな？';
// .htmlを使う
$('#html').html(addText);
// .textを使う
$('#text').text(addText);
$('button').text('戻す');
}
};