如何添加 在现有的 ？(How to add in an existing 2019-06-14 21:06发布 站内文章 / 后端开发 42 0 0

我有一些代码，看起来像这样：

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

我想使用jQuery以下添加到列表：

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

我尝试这样做：

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

但是，这增加了新li最后内 li ，后不是（在结束标记之前）。 什么是补充最好的方法li ？

Answer 1:

这将做到这一点：

$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

两件事情：

• 你可以只追加<li>到<ul>本身。
• 您需要使用比您正在使用你的HTML什么，相反类型的引号。 如此以来，你在你的属性使用双引号，请用单引号的代码。

Answer 2:

你可以这样做也更“对象的方法”，仍然易于阅读：

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

你不必用引号打的话，但必须保持括号的痕迹:)

Answer 3:

如何使用“后”，而不是“追加”。

$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

“之后（）”可以插入内容，由参数指定的，在匹配的元素集合中的每个元素之后。

Answer 4:

如果你只是在添加文字li ，你可以使用：

 $("#ul").append($("<li>").text("Some Text."));

Answer 5:

jQuery提供可能满足您在这种情况下，需要下列选项：

append用于在父的末尾添加一个元素div选择器中指定：

$('ul.tabs').append('<li>An element</li>');

prepend用于在父的顶部/开始添加元素div选择器中指定：

$('ul.tabs').prepend('<li>An element</li>');

insertAfter让你可以指定一个元素之后下一个将您选择的元素。 然后，您创建的元素会被放置在DOM指定选择关闭标签后：

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore会做上述的相反：

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

Answer 6:

你应该追加到容器，而不是最后一个元素：

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

追加（）函数应该可能已经被调用的add（）jQuery中，因为它有时混淆人民。 你可能会认为这将给定元素追加后的东西，而它实际上把它添加到元素。

Answer 7:

代替

$("#header ul li:last")

尝试

$("#header ul")

Answer 8:

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Answer 9:

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

下面是关于代码的可读性（对于博客无耻的插头）的一些反馈。 http://coderob.wordpress.com/2012/02/02/code-readability

考虑将它们添加到您的UL ..它看起来像这样的动作你分离新元素的声明：

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

编码愉快:)

Answer 10:

这是你可以做的是，最近的路

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

其中在阵列块。 你通过数组需要循环。

Answer 11:

这是另外一个

$("#header ul li").last().html('<li> Menu 5 </li>');

Answer 12:

简单

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );

文章来源: How to add

in an existing

?