博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何在现有的<ul>中添加<li>?
阅读量:2291 次
发布时间:2019-05-09

本文共 2100 字,大约阅读时间需要 7 分钟。

我的代码看起来像这样:

我想使用jQuery将以下内容添加到列表中:

  • Message Center
  • 我试过这个:

    $("#content ul li:last").append("
  • Message Center
  • ");

    但是,这增加了新li最后 li ,后不是(在结束标记之前)。 添加这个li的最佳方法是什么?


    #1楼

    $("#content ul").append('
  • Message Center
  • ');

    #2楼

    这样做:

    $("#header ul").append('
  • Message Center
  • ');

    两件事情:

    • 您只需将<li>附加到<ul>本身即可。
    • 您需要使用与您在HTML中使用的相反类型的引号。 因此,由于您在属性中使用双引号,请使用单引号括起代码。

    #3楼

    您应该附加到容器,而不是最后一个元素:

    $("#content ul").append('
  • Message Center
  • ');

    append()函数应该在jQuery中被称为add() ,因为它有时会让人感到困惑。 你会认为它在给定元素之后附加了一些东西,而它实际上添加到元素中。


    #4楼

    代替

    $("#header ul li:last")

    尝试

    $("#header ul")

    #5楼

    如果您只是在该li添加文本,则可以使用:

    $("#ul").append($("
  • ").text("Some Text."));

  • #6楼

    这是另一个

    $("#header ul li").last().html('
  • Menu 5
  • ');

    #7楼

    jQuery带有以下选项,可满足您在这种情况下的需求:

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

    $('ul.tabs').append('
  • An element
  • ');

    prepend用于在选择器中指定的父div的top / start处添加元素:

    $('ul.tabs').prepend('
  • An element
  • ');

    insertAfter允许您在指定的元素后面插入选择的元素。 然后,您创建的元素将在指定的选择器结束标记之后放入DOM中:

    $('
  • An element
  • ').insertAfter('ul.tabs>li:last');will result in:
  • Edit
  • An element
  • insertBefore将执行与上述相反的操作:

    $('
  • An element
  • ').insertBefore('ul.tabs>li:last');will result in:
  • An element
  • Edit

  • #8楼

    简单

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

    #9楼

    这是您可以做到的最短路

    list.push($('
  • ', {text: blocks[i] }));$('ul').append(list);
  • 数组中的块。 你需要循环遍历数组。


    #10楼

    您也可以采用更多“对象方式”并且仍然易于阅读:

    $('#content ul').append(    $('
  • ').append( $('').attr('href','/user/messages').append( $('').attr('class', 'tab').append("Message center"))));
  • 你不必再与引号斗争,但必须保持一丝大括号:)


    #11楼

    如何使用“after”而不是“append”。

    $("#content ul li:last").after('
  • Message Center
  • ');

    “.after()”可以在匹配元素集中的每个元素之后插入由参数指定的内容。


    #12楼

    $("#content ul").append('
  • Message Center
  • ');

    以下是有关代码可读性的一些反馈(博客的无耻插件)。

    考虑将新元素的声明与将它们添加到UL的操作分开。它看起来像这样:

    var tabSpan = $('', {    html: 'Message Center'});var messageCenterAnchor = $('', {    href='/user/messages',    html: tabSpan});var newListItem = $('
  • ', { html: messageCenterAnchor, "id": "myIDGoesHere"}); // NOTE: you have to put quotes around "id" for IE..$("content ul").append(newListItem);

    快乐编码:)

    转载地址:http://rldnb.baihongyu.com/

    你可能感兴趣的文章
    Android Service服务(二)
    查看>>
    愿你历尽千帆,归来仍少年
    查看>>
    java实现生产者消费者问题
    查看>>
    Android 数据存储三种方式
    查看>>
    Android 获取设备唯一ID
    查看>>
    二叉搜索树
    查看>>
    Android 横竖屏幕切换
    查看>>
    Android获取当前装置屏幕信息
    查看>>
    TCP/IP协议卷一 契约 (部分内容)
    查看>>
    Java 内存管理和垃圾回收机制
    查看>>
    iOS invalid bitcode signature等常见错误
    查看>>
    iOS 开发常用的代码块
    查看>>
    ios 文件存储
    查看>>
    IOS 生成图片数字字母验证
    查看>>
    socket 使用select()非阻塞方式实现
    查看>>
    setsockopt()函数使用详解
    查看>>
    信号量sem_t,互斥锁pthread_mutex_t的使用
    查看>>
    FFmpeg 解码
    查看>>
    ffmpeg 对图像数据格式以及图片缩放
    查看>>
    FFmpeg编解码常用函数ffmpeg av_parser_parse2()函数
    查看>>