在列表中使用.append（）将文本放在换行符上 [英] Using .append() with lists places text on a newline

问题描述

我试图在javascript中创建一个无序列表。我的代码显示如下：

$ $ $ $ $ $ $ $ $（$） usersLst）{
$（div）.append（< li>）
$（div）.append（usersLst [i] [1]）$ ​​b $ b $（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 
  

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

解决方案

假设这段代码：

  $（'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元素。 / p>

.append （以及所有其他DOM操作方法）正在处理 DOM元素。这只是jQuery调用 .appendChild ^[MDN] 。

HTML只是代表结构。在那里，每个元素都由一个开始标记和一个（可选）结束标记表示。浏览器解析HTML并在内存中创建DOM。 DOM（文档对象模型）是一个定义良好的界面，用于与分层结构化数据进行交互。一旦使用DOM，开始和结束标记不再存在（即HTML），只有节点。我建议阅读 MDN上的DOM 。

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

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

  // jQuery解析HTML字符串并创建一个UL元素
 var $ ul = $（'< ul />'）; 
 //相当于
 // var $ ul = document.createElement（'ul'）; <  - 注意：不是HTML，它是节点名称
 
（var i在usersLst中）{
 // jQuery分析HTML，创建LI元素并将其添加到列表
 $ ul.append（'< li>'+ usersLst [i] [1] +'< / li>'）; 
 //相当于
 // var li = document.createElement（'li'）; 
 // li.appendChild（document.createTextNode（usersLst [i] [1]））; 
 // $ ul.appendChild（li）; 
} 
 
 //将填充的UL元素追加到现有节点：$ b​​ $ b $（div）.append（$ ul）; 
 //相当于
 // existingElement.appendChild（$ ul）; 
  

I'm trying to create an unordered list in javascript. My code reads:

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

Then the result is:

•
bob
•
alice
•
fred

However, if the code reads:

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

Then the result is:

 - bob
 - alice
 - fred

So with three separate appends it appears that a newline is being mysteriously inserted. What's going on?

解决方案

Assume this code:

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

Lets have a look at the resulting structure (Chrome 21):

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

What happend? .append takes each argument and converts the strings to proper DOM elements. Thus the code is the same as doing:

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

The two calls containing closing tags are ignored since they cannot be convert to valid HTML / DOM elements.

.append (and all other DOM manipulation methods) is working on DOM elements. It's just jQuery's way of calling .appendChild ^[MDN].

HTML is just a specific format of representing structure. In there, each element is represented by a opening tag and an (optional) closing tag. The browser is parsing the HTML and creates the DOM in memory. The DOM (Document Object Model) is a well defined interface for interacting with hierarchical, structured data. Once you are working with the DOM, start and end tags don't exist anymore (that's HTML), only Nodes. I recommend to read about DOM on MDN.

jQuery allows you to pass HTML strings to .append because it is convient, but each string is immediately converted to corresponding DOM nodes and appended to other nodes. You cannot build an HTML string with multiple calls to .append.

This is a corrected version of your code:

// 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);

这篇关于在列表中使用.append（）将文本放在换行符上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！