Jquery Append 未按预期顺序工作答案

【问题标题】：Jquery Append is not working in expected orderJquery Append 未按预期顺序工作
【发布时间】：2015-01-04 08:13:32
【问题描述】：

新年快乐。我正在尝试创建分页链接。所以基本上我的代码很大，所以我在下面创建了代码以便于理解。

<div id = "test"></div>

func1();

function func1() {
    $("#test").append("<nav><ul class='pagination pagination-lg'>");
    func3();
    $("#test").append("</ul></nav>");
}

function func2() {

$("#test").append("<li>data</li>"); 
}

function func3() {
func2();
}

我希望结果是这样的

<nav><ul class="pagination pagination-lg"><li>data</li></ul></nav>

但是输出是

<nav><ul class="pagination pagination-lg"></ul></nav><li>data</li>

为什么会发生这种情况？即使我在添加 </ul></li> 之前调用了函数

P.s Fiddle http://jsfiddle.net/s6d5wytf/

【问题讨论】：

为什么要搞得这么复杂！？
看看 append 是如何工作的：api.jquery.com/append
因为我的原始功能是这样的jsfiddle.net/885SQ，你希望我做什么
该代码看起来需要进行一些认真的重构，而 jQuery 正是执行此操作的正确工具。如果您阅读我上面发布的链接，您将熟悉此功能
我知道即使我用 appends 更新函数！它仍然是格式错误的..benjamin 的答案是正确的

标签： javascript jquery html

【解决方案1】：

当您附加格式错误的 HTML 时，浏览器会尽力将其转换为格式良好的 HTML，因此当您这样做时：

    $("#test").append("<nav><ul class='pagination pagination-lg'>");

浏览器看到它有一个打开的<ul> 标记而没有</ul>，并假设你已经完成了它 - 特别是因为一个鲜为人知的事实是</ul> 标记是隐式的并且可以由浏览器推断。

所以 - 您在第一次开始时在概念上附加的是：

    $("#test").append("<nav><ul class='pagination pagination-lg'></ul></nav>");

您想要做的是使用您构造并附加到或链接字符串的临时元素。这是第一种方法的示例

function func1() {
    var menu = $("<nav></nav>"); // create but not add anywhere
    menu.append("<ul class='pagination pagination-lg'></ul"); // add ul
    func3(menu);
    $("#test").append(menu);
}

function func2(menu) {
    menu.find("ul").append("<li>data</li>"); 
}

这还具有额外的好处，即只查询一次实际文档，这会更快，尽管如果只查询 3 次，则可以忽略不计。

【讨论】：