Question

我正在尝试在ul（称为menu）元素中添加两个元素：

$('#menu').append($('<li>')).append($('<a>'), {id: 'page3', href:'#', text:'page3'});

如果我创建<li>和<a>，我将错过该链接。有什么想法吗？

Answer 1

<ul>的元素应该是<li>个元素，您不应该直接添加<a>个元素。 <a>应附加到<li>。

此外，具有<a>属性的对象应该是对$()的调用的第二个参数，而不是.append()的单独参数。

$('#menu').append($('<li>').append($('<a>', {id: 'page3', href:'#', text:'page3'})));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
</ul>

Answer 2

«我认为如果我逐个创建元素，它可以更好地阅读....»

这是一个一个方法......更清楚地重新阅读代码。

// Your object
var myobject = {id: 'page3', href:'#', text:'page3'};

// Create the li
var list_item = $("<li>");

// Create the anchor and use the object data to set the attribute and text
var anchor = $("<a>")
               .attr("id",myobject.id)
               .attr("href",myobject.href)
               .text(myobject.text);

// Append the anchor to the li
list_item.append(anchor);

// Append the li to the menu
$('#menu').append(list_item);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="menu">
</ul>

«逐一»方法可能会让您更清楚地重新阅读您的代码...
但它使用了许多可以减少的方法调用。

2 次.append()
2 次.attr()
1 时间.text()

因此，当你考虑表现时，这不是最好的事情此时，您应该能够阅读 one liner 代码。

从对象中执行此操作的最短路径是使用字符串连接：

// Your object
var myobject = {id: 'page3', href:'#', text:'page3'};

// Append the li to the menu
$('#menu').append($('<li><a href="'+myobject.href+'" id="'+myobject.id+'">'+myobject.text+'</a></li>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="menu">
</ul>

请参阅？那只是 1 .append()来电 ;）

JQuery - 在<ul>元素中添加两个DOM元素

2 个答案: