使用Javascript输出HTML不适用于无序列表

Question

I am using javascript to add HTML into a variable which is passed into a DIV:

var FN = 'options';
var gn = 'Bob';
var LN = 'Simpson';
var LN2 = 'Jetson';
var LN3 = 'Flintstone';
var formResult = document.getElementById("resultFinal");
var theEnd == 'yes';

Answer = "<p class='yes'>The following " + FN + " are available to the user: <ul><li>" + gn + " " + LN + "</li><li>" + gn + " " + LN2 + "</li><li>" + gn + " " + LN3 + "</li></ul><br>The following " + FN + " are available to the user: <ul><li>" + gn + " " + LN + "</li><li>" + gn + " " + LN2 + "</li><li>" + gn + " " + LN3 + "</li></ul></p>";
document.querySelector("#resultFinal").innerHTML+=Answer;

if (theEnd == 'yes') {              
    if (formResult.style.display == "none") {
        formResult.style.display = "block";
    } else {
        formResult.style.display = "none";
    }                   
}

<div id="resultFinal" style="display:none"></div>

The variable theEnd is just a toggle switch that hides the DIV that contains the content of the variable Answer.

The output of Answer is displaying incorrectly in the browser.

If I do this:

Answer = "<p class='yes'>The following " + FN + " are available to the user:<br>The following " + FN + " are available to the user:</p>";
document.querySelector("#resultFinal").innerHTML+=Answer;

It displays correctly as :

<p class='yes'>The following options are available to the user:<br>The following options are available to the user:</p>

But using the intended code as seen at the top, I get this:

<p class='yes'>The following options are available to the user:</p><ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul><br>The following options are available to the user:<ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul><p></p>

When it should be this:

<p class='yes'>The following options are available to the user:<ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul><br>The following options are available to the user:<ul><li>Bob Simpson</li><li>Bob Jetson</li><li>Bob Flintstone</li></ul></p>

Why is this happening and how can I fix it?

Answer 1

Well, The mentioned code is working absolutely fine for me.

Instead of

var theEnd == 'yes';

I changed like :

var theEnd = 'yes';

Removed double = and used only 1 =

Please try to use <div> instead of <p> , as browser auto closes and auto opens missing start or end tag for <p>