javascript - 对列表使用 .append() 将文本放在换行符上

Question

我正在尝试在 JavaScript 中创建一个无序列表。我的代码如下:

$(div).append("<ul>")
for (i in usersLst){
    $(div).append("<li>")
    $(div).append(usersLst[i][1])
    $(div).append("</li>")
}
$(div).append("</ul>")

那么结果是:

•
bob
•
alice
•
fred

但是，如果代码如下:

$(div).append("<ul>")
for (i in usersLst){
    $(div).append("<li>"+usersLst[i][1]+"</li>")
}
$(div).append("</ul>")

那么结果是:

 - bob
 - alice
 - fred

因此，通过三个单独的附加，似乎正在神秘地插入换行符。这是怎么回事？

Answer 1

假设此代码:

$('div')
    .append("<ul>")
    .append("<li>");
    .append('foo');
    .append("</li>")
    .append("</ul>")​​​

让我们看看生成的结构(Chrome 21):

<div>
    <ul></ul>
    <li></li>
    foo
</div>

发生了什么？ .append 接受每个参数并将字符串转换为正确的 DOM 元素。因此，代码与执行相同:

$('div')
   .append(document.createElement('ul'))
   .append(document.createElement('li'));
   .append(document.createTextNode('foo'));

包含结束标记的两个调用将被忽略，因为它们无法转换为有效的 HTML/DOM 元素。

.append(以及所有其他 DOM 操作方法)适用于 DOM 元素。这只是 jQuery 的调用方式 .appendChild ^[MDN] .

HTML只是表示结构的一种特定格式。其中，每个元素都由一个开始标记和一个(可选)结束标记表示。浏览器正在解析 HTML 并在内存中创建 DOM。 DOM(文档对象模型)是一个定义良好的接口(interface)，用于与分层、结构化数据交互。一旦您使用 DOM，开始和结束标签就不再存在(即 HTML)，只有 Nodes 。我建议阅读 DOM on MDN .

jQuery 允许您将 HTML 字符串传递给 .append，因为它很方便，但每个字符串都会立即转换为相应的 DOM 节点并附加到其他节点。您无法通过多次调用 .append 来构建 HTML 字符串。

这是代码的更正版本:

// jQuery parses the HTML string and creates a UL element
var $ul = $('<ul />');
// equivalent to
// var $ul = document.createElement('ul'); <- NOTE: not HTML, it's a node name

for (var i in usersLst) {
    // jQuery parses the HTML, creates a LI element and appends it to the list
    $ul.append('<li>' + usersLst[i][1] + '</li>');
    // equivalent to
    // var li = document.createElement('li');
    // li.appendChild(document.createTextNode(usersLst[i][1]));
    // $ul.appendChild(li);
}

// append the populated UL element to an existing node:
$(div).append($ul);
// equivalent to
// existingElement.appendChild($ul);