如何在不重新加载页面的情况下将html代码插入加载的html页面？

Question

尝试将html代码插入正在运行的html中，然后在处理后删除所述代码。 这是我写的，不明白为什么它不起作用。 不应该引号将它作为一个字符串放入div范围中吗？

<div><span id="evolutionUpgrades"></span></div> 

var membrane =“bubble”;

function evolutionUpgrade() { 
if (membrane == "bubble") { 
    if (evolution >= 1) { 
     document.getElementById("evolutionUpgrades").innerHTML = 
      '<p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> < 
    <p title="Your  p title = "Your first evolution. Double wall bubbles were the first evolution of cells."><button" type="button"> onclick="doublebubble< button type = "button" 
     onclick = "doublebubble()"><b>Double" Bubble<> <b> Double Bubble < /b></button><button > < /p>' 
    } 
} 
}; 

function doublebubble() { 
membrane = "doublebubble" 
document.getElementById('membrane').innerHTML = "Double Bubble"; 
} 

当进化变量等于或大于1并运行两个if函数，然后将代码复制粘贴到html中时，这应该激发。

不幸的是，似乎我的javascript忽略了''作为字符串，并试图按原样运行代码。

如何让它只是插入，以便当if语句为true时，它会创建一个按钮，而不是在单击时执行该函数，并且在运行该函数时该函数变为不真实然后被删除？

我使用错误的标志吗？ 错误的标点符号？ 我在做什么错或不知道？ 请帮助解决这个问题。 请详细说明您的答案，以便我可以从中学习。 只解决我的代码而不解释并不能真正帮助我。

我不介意修复我的语法错误的人。 但请不要更改代码。 我需要看到破碎和固定之间的差异来学习。 特别是当你破坏代码。 除了Jason W的修复外，我的代码是正确的。

Answer 1

字符串中的html很好，但是由于您已将字符串放在多行上，所以出现语法错误。假设您忘记关闭字符串和分号，Javascript会对其进行解析 - 如何深思熟虑:)

为了解决这个问题，最简单的方法是添加一个\以转义换行符（应适用于所有浏览器）或使用反向标记（`）而不是单引号（但只有当ES6支持对您的应用程序才适用）。

document.getElementById("evolutionUpgrades").innerHTML = 
    '<p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> \ 
    <p title="Your first evolution. Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p>' 

*注意：第一关闭p标签后的“\”逃脱换行符你的HTML中

Answer 2

添加到什么@Jason说。

• 你的evolution变量在哪里？如果没有evolution变量，嵌套if将不起作用。
• 考虑使用更多的modern way添加一个点击事件按钮。
• 我也可能将完整的代码包装在immediately invoked function expression中，然后调用该函数。

只是我的两分钱。

Answer 3

如果你使用jQuery，你也可以使用。追加（）方法

$('#evolutionUpgrades').append(` 
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> 
    <p title="Your first evolution. Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p> 
`) 

Answer 4

代替以这种方式插入的HTML，包括可选的HTML到您的主HTML文件，然后通过加入/除去的一类如hide开启或关闭。

<div> 
    <span id="evolutionUpgrades" class="hide"> 
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> 
    <p title="Your first evolution. Double wall bubbles were the first evolution of cells."> 
    <button type="button" onclick="doublebubble()"><b>Double Bubble</b></button> 
    </p> 
    </span> 
</div> 

var membrane = "bubble"; 

function evolutionUpgrade(){ 
    if (membrane == "bubble") { 
    if (evolution >= 1) 
     document.getElementById("evolutionUpgrades").classList.remove("hide"); 
    } 
} 

function doublebubble() { 
    membrane = "doublebubble"; 
    document.getElementById('membrane').innerHTML = "Double Bubble"; 
} 

.hide { display: none; } 

一般来说，最好避免治疗HTML被插入或从DOM移除巨大的字符串。正如你发现的那样，你会遇到引用和换行符的问题。它也使你的代码更难阅读。让HTML为HTML，JS为JS。