#innerHTML Javascript 中的文本

Posted 2023-05-07

【中文标题】#innerHTML Javascript 中的文本

【英文标题】：# in text at innerHTML Javascript

【发布时间】：2021-12-27 13:43:07

【问题描述】：

我不知道如何获得“，我在使用 DOM.innerhtml 时需要在文本中使用它。

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp('kokain')' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp('hasj')' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp('amfetamin')' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp('benzo')' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp('molly')' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>"

我需要调用一个函数onclick='endre("kjøp_narkotika") 我不能使用onclick='endre('kjøp_narkotika') 因为那样函数就不会调用了。

【问题讨论】：

"use \"backslash\" to escape the nested quotes"，或使用`"template" string` 来避免转义引号。

【参考方案1】：

    document.getElementById("info").innerHTML = `<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp("kokain")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp("hasj")' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp("amfetamin")' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp("benzo")' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp("molly")' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`
    function kjøp(param)console.log(param)

<div id="info"></div>

试试这个，希望对你有帮助。

ES6 支持反引号。

document.getElementById("info").innerHTML = `<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp("kokain")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp("hasj")' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp("amfetamin")' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp("benzo")' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp("molly")' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`

方法2：连接字符串

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp("+'"kokain"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp("+'"hasj"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp("+'"amfetamin"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp("+'"benzo"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp("+'"molly"'+")' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`

【讨论】：

有什么不同？我找不到它..

反引号 > 这些

【参考方案2】：

您可以使用反引号 (`) 代替 (")

document.getElementById("info").innerHTML = `<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick="kjøp('kokain')" class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp('hasj')' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp('amfetamin')' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp('benzo')' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp('molly')' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>`

在上面的示例中，我已将按钮单击的单引号更改为双引号。

onclick="kjøp('kokain')"

您可以在此处查看示例： https://jsfiddle.net/jubish/w2ospk15/16/

点击按钮Kokain查看结果。

方法二

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp( \"kokain\")' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp('hasj')' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp('amfetamin')' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp('benzo')' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp('molly')' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>"

这里我使用了反斜杠来转义双引号 示例：

 onclick='kjøp( \"kokain\")'

工作代码 - https://jsfiddle.net/jubish/ez3hr7g1/8/

【讨论】：

谢谢，所以我可以使用 DOM.innerhtml = '' 代替 DOM.innerhtml = '' :)