Question

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

正如你可以看到它在我想要之前添加标签。我想也许我会说错了，有什么建议吗？

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

Answer 2

.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);
});

Answer 3

当您动态创建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>')
});

Jquery - 使用.append时停止自动完成HTML标记

3 个答案: