0

我正在尝试从 XML 创建一个嵌套列表，但是我发现 .append 函数似乎可以自动完成我的 HTML 标签，这很有用，但是当它不需要时我如何覆盖此操作或者是否有更聪明的方法来执行以下操作：

$('#name').html('<li>'+'Origin'+'<ul>'+' ' ).html();
$(this).find("origin").each (function() {
var name = '<li>origin: ' + $(this).text() + '</li>';
$('#name').append(name);
$('#name').append('</ul></li>');

我得到什么：

<ul id="name">
<li>
Origin
<ul> </ul>
</li>
<li>origin: network</li>
<li>origin: nevil-nmshub</li>
<li>origin: origin_overide</li>
<li>origin: Support_4</li>
<li>origin: test-origin</li>
</ul>

正如您所看到的，它在我想要它们之前添加了标签。我想也许我做错了，有什么建议吗？

4

3 回答 3

1

.append()（与 一样.innerHTML）只能插入整个 DOM 元素，而不是任意 HTML 的不完整片段。

所以根据定义，当你第一次.append()做某事时，其中的任何标签都会隐式关闭。

试试这个：

var $li = $('<li>').appendTo('#name');
var $ul = $('<ul>').appendTo($li);
$(this).find("origin").each(function() {
    $('<li>', { text: 'origin: ' + $(this).text() }).appendTo($ul);
});
于 2012-05-23T12:37:42.323 回答
1

将您的代码更改为以下内容：

var ul = $('<ul />');

// I believe you mean to find elements with class origin instead of <origin>
$(this).find(".origin").each (function() {
   var name = '<li>origin: ' + $(this).text() + '</li>';
   ul.append(name);
});
$('#name').append(ul);
于 2012-05-23T12:33:41.820 回答
0

在动态创建 HTML 时，请尽量避免将开始标签和结束标签分开。

你可以这样做：

$('#name').append('<li>Origin<ul></ul></li>');

// I think 'origin' is an XML tag.
// So no worries, you can call in like an HTML element
$(this).find('origin').each(function(index, value) {
    $('#name ul').append('<li>origin: ' + value + '</li>')
});
于 2012-05-23T13:05:52.493 回答