【javaScript・jQuery】動的に追加したhtmlタグがタグとして認識されず、文字として表示されてしまう。

2019年5月19日

javaScriptやjQueryを使って、動的にhtmlのタグを追加するときってありますよね。

そんな時に、何も考えずにどこかのサイトからコピペしたソースコードを貼ると、

htmlタグがタグではなく、文字として表示されてしまう…

なんてことがあると思います。

例えば、

「こんにちは」という文字に、「<br>よろしく」という文字をjavaScriptで動的に追加すると、

使う関数によって、

「こんにちは

よろしく」

と2行になったり、

「こんにちは<br>よろしく

とタグが文字列として表示されたりします。

この二つの違いは、

文字列の出力の際に、「text」と「html」のどちらを使うかで異なります。

「html」の場合はhtmlタグはタグとして認識されます。

「text」の場合は、htmlタグは文字として認識され、

<サンプル>

ここにhtmlで出力 htmlで出力
ここにtextで出力 textで出力

サンプルのソースコードを紹介します。
[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<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>
</body>
</html>

[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('戻す');
    }
};

スポンサーリンク