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

Question

我正在使用javascript将HTML添加到传递给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>

变量theEnd只是一个切换开关，它隐藏包含变量Answer的内容的DIV。

Answer的输出在浏览器中显示不正确。

如果我这样做：

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;

它正确显示为：

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

但是使用顶部所见的预期代码，我得到了这个：

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

什么时候应该这样：

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

为什么会发生这种情况，我该如何解决？

Answer 1

好吧，上面提到的代码对我来说非常好。

代替

var theEnd == 'yes';

我改变了：

var theEnd = 'yes';

删除double =并仅使用1 =

请尝试使用<div>而不是<p>，因为浏览器自动关闭并自动打开<p>缺少的开始或结束标记