Jquery的Append方法没有按照预期顺序工作

Question

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

<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();
}

I expect the result to be like

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

但输出结果是：

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

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

附：Fiddle链接：http://jsfiddle.net/s6d5wytf/

- Vishnu

---

因为我的原始函数是这样的 http://jsfiddle.net/885SQ/，你希望我做什么？ - Vishnu

那段代码看起来需要进行严重的重构，而jQuery正是完成这项工作的合适工具。如果你阅读我上面发布的链接，你将会熟悉这个功能。 - Saturn K

我知道，即使我使用附加操作更新函数，它仍然会出现格式错误。Benjamin的答案是正确的。 - Vishnu

`Try this:

func1(); function func1() { $("#test").append("

"); $(".pagination.pagination-lg").html($('
• data
')); }` - Super Hornet

http://codepen.io/anon/pen/jEVaaE - Shiva

Answer 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次查询也可以忽略不计。

- Benjamin Gruenbaum