How to insert html code into a loaded html page without reloading the page?

Question

Trying to insert html code into running html then after being processed remove said code. This is what I have written and don't understand why it won't work. Shouldn't the quotes run it as a string to be into put into the div span?

<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";
}

This should fire when the evolution variable becomes equal to or greater than 1 and run the two if functions and then copy paste the code into the html.

Unfortunately it seems my javascript is ignoring the '' as a string and trying to run the code as is.

How do I make it just insert so that while the if statements are true it creates a button that than performs the function when clicked and on running that function becomes untrue to then be removed?

Am I using the wrong flag? The wrong punctuation? What am I doing wrong or not know? Please help fix this. Please be detailed with your answer so I can learn from it. Just fixing my code without explaining does't truly help me.

I don't mind people fixing my grammar mistakes. But please don't change the code. I need to see the differences between broken and fixed to learn. Especially when you break the code. My code was correct except for the Jason W's fix.

Answer 1

The html within strings is fine, but you're getting a syntax error because you've put the string onto multiple lines. Javascript parses on the newline assuming you forgot to close the string and semicolon - how thoughtful :)

To get around this, easiest thing is to add a \\ to escape the newline character (should work for all browsers) or use backtick (`) instead of single quote (but only if ES6 support only is ok for your app).

    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>'

*Notice the "\\" after the first closing p tag to escape the newline within your HTML

Answer 2

Add to to what @Jason said.

• Where's your evolution variable? The nested if won't work if there's no evolution variable.
• Consider looking into using a more modern way of adding a click event to the button.
• I would also probably wrap the full code in an immediately invoked function expression and call the function in that.

Just my two cents.

Answer 3

Instead of inserting HTML in this way, include the optional HTML into your main HTML file, then turn it on or off by adding/removing a class such as 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; }

In general, it's better to avoid treating HTML as huge strings which are inserted into or removed from the DOM. You'll run into problems with quoting and newlines, as you've found. It also makes your code harder to read. Let HTML be HTML and JS be JS.

Answer 4

If you are using jQuery you can also use the .append() method

$('#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>
`)