如何在不重新加載頁面的情況下將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。