浏览器自动关闭列表标签答案

【问题标题】：Browser automatically closing list tags浏览器自动关闭列表标签
【发布时间】：2017-12-03 00:30:50
【问题描述】：

我正在尝试使用 jQuery 创建一个 html 列表，但浏览器过早地关闭了我的 ul 标记和 li 标记。

作为一个简单的例子，我尝试制作这个列表：

你好

你好吗？

所以我写了代码：

$("#test").append("<ul>");
$("#test").append("<li>");
$("#test").append("Hello");
$("#test").append("</li>");
$("#test").append("<li>");
$("#test").append("How are you?");
$("#test").append("</li>");
$("#test").append("</ul>");

但代码导致：

•
你好
•
你好吗？

我知道我可以简单地写：

$("#test").append("<ul><li>Hello</li><li>How are you?</li></ul>");

但我的项目要求代码分几行。

这是一个 jsfiddle：https://jsfiddle.net/greyshark7/99764x9h/

【问题讨论】：

.append 不能以这种方式工作 - 您需要将元素的完整 HTML 代码传递给它，您不能在其中“附加”开始和结束标记单独的步骤，这在 DOM 术语中毫无意义。所以<li>Hello</li> 是你可以在这里逃脱的最小的“附加单元”。
可以不试试document.createElement('ul')之类的吗？它也比 jQuery 将您的 html 字符串转换为元素更快（$("<ul></ul>")）
您不会像使用StringBuilder 那样“附加” html，而是附加 DOM 节点。因此，当您附加 <ul> 时，您实际上是在附加 <ul></ul>

标签： javascript jquery html list html-lists

【解决方案1】：

这样试试

var ul = $("<ul></ul>");
ul.append('<li>hello</li>');
ul.append('<li>how r u</li>');
ul.append('<li>fine</li>');
$("#test").append(ul);

【讨论】：

【解决方案2】：

你应该避免只附加部分，因为 jquery 会自动关闭它们。

所以我想到了两个简单的解决方案：

首先是构建附加字符串：

var try = "";
try = try + "<ul>";
try = try + "<li>";
try = try + "Hello";
//And so on
$("#test").append(try);

或者是这样的： DEMO

您可以通过选择以 nth:child 附加子级来获得更多信息（并避免使用许多 id）。或者像其他答案一样，将其保存在变量中。

【讨论】：