innerHTMLの挙動について

Question

javascriptで特定のdiv要素にinnerHTMLでアンカータグを追加する際に
意図しない値が入ってしまい困っています。

該当のソースコード

function AAA(){
    let test = document.getElementById('test');
    test.innerHTML = '<a href="#" onclick="BBB("AAA")">AAA</a>';
    console.log(test.innerHTML);
}

<p><a href="#" onclick="AAA()">テスト</a></p>
<div id="test"></div>

発生している問題・エラーメッセージ

本来は

<a href="#" onclick="BBB("AAA")">AAA</a>

このような内容を想定していたのですが
実際に上記のソースを動かすと下記のように出力されます。

<a href="#" onclick="BBB(" aaa")"="">AAA</a>

補足情報（FW/ツールのバージョンなど）

テストはchrome、コーディングはVS CODEでしています。

Answer 1

    test.innerHTML = '<a href="#" onclick="BBB("AAA")">AAA</a>';

HTMLコードでonclick=に続いてダブルクオート"で括って指定した文字列の中身はBBB(ということになります。
でも指定したいのはBBB("AAA")ですよね。これはつまりJavaScriptコードでAAAという中身の文字列を引数としてBBBという関数を呼び出すということですよね。

ならばこのJavaScriptコードでは

BBB('AAA')

と、ダブルクオートではなくシングルクオートを使うことで解決できます。
つまりtest.innerHTMLにセットするHTMLコードを

<a href="#" onclick="BBB('AAA')">AAA</a>

とするわけです。

しかし、このHTMLコードをtest.innerHTMLにセットするためにJavaScriptの文字列として表す必要があるわけですが、このHTMLコードはシングルクオートもダブルクオートも含んでいます。

そこで、これをJavaScriptの文字列として表すのにはシングルクオートを使うことにして、HTMLコード内のシングルクオートは\でエスケープして表しましょう。
（逆、つまり、文字列を表すのにダブルクオートを使って、中身のダブルクオートを\でエスケープするのでも可です）

つまり、こういうことです。

    test.innerHTML = '<a href="#" onclick="BBB(\'AAA\')">AAA</a>';

Comments

[myyc]

ありがとうございます！　動きました！

Answer 2

二重引用符で囲まれた属性値の中に二重引用符を書きたいときは、"と書きます。そのまま書くと、そこで属性値の終わりになってしまいます。

    test.innerHTML = '<a href="#" onclick="BBB(&quot;AAA&quot;)">AAA</a>';

参考：文字参照 - Wikipedia

Comments

[myyc]

ありがとうございます！　動きました！