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（文档对象模型）是一个定义良好的接口，用于与分层的结构化数据进行交互。使用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);

Answer 2

他们都不正确。您应该首先创建整个字符串，然后将其附加到DIV：

var ul = '<ul>';
for (i in usersLst){
    ul+='<li>' + usersLst[i][1] + '</li>';
}
ul+='</ul>';

$(div).append(ul)

使用带有列表的.append（）将文本放在换行符上

2 个答案: