0

我正在尝试在 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

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

4

2 回答 2

4

假设这段代码：

$('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。我建议阅读MDN 上的 DOM。

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

这是您的代码的更正版本：

// 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);
于 2012-08-14T20:16:56.850 回答
1

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

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

$(div).append(ul)
于 2012-08-14T20:14:49.363 回答