如何使用jQuery追加ul元素？以及为何向现有ul添加数组元素的代码无法运行？

一、你的代码无法运行的常见原因（附修复示例） #

作为jQuery新手，你大概率是踩了这几个常见的坑：

1. 没等DOM加载完成就执行代码 #

如果你的脚本放在<head>标签里，浏览器还没渲染出页面上的<ul>元素，jQuery就找不到它，自然没法往里面加内容。

错误示例：

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    let Names = ['Richard', 'Bob', 'John'];
    // 这时候页面里的<ul>还没被渲染出来，$('ul')是空的
    $.each(Names, function(index, name) {
      $('ul').append(`<li>${name}</li>`);
    });
  </script>
</head>
<body>
  <ul></ul>
</body>

修复方法：要么把代码包在$(document).ready()里，要么把脚本移到<body>的最末尾：

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <ul></ul>
  <script>
    let Names = ['Richard', 'Bob', 'John'];
    $(document).ready(function() {
      $.each(Names, function(index, name) {
        $('ul').append(`<li>${name}</li>`);
      });
    });
  </script>
</body>

2. 忘记引入jQuery库 #

如果页面里没加载jQuery文件，浏览器会直接报错$ is not defined，所有jQuery代码都跑不起来。一定要在自己的脚本之前引入jQuery，不管是用CDN链接还是本地文件。

3. 选择器不匹配 #

比如你的<ul>有专属的id或class，但你用错了选择器：

• 如果ul的id是name-list，你得用$('#name-list')而不是$('ul')（要是页面有多个ul，还会把内容加到错误的列表里）
• 先确认页面里确实存在对应的<ul>元素，别打错标签或属性名。

4. 数组遍历/元素添加方式错误 #

比如直接把整个数组塞到ul里，而不是逐个生成<li>标签：
错误示例：

$('ul').append(Names); // 这会把数组转成字符串"Richard,Bob,John"直接插进去，不会生成li

正确的做法是遍历数组，给每个名字创建一个li再追加进去。

二、如何用jQuery追加一个ul元素 #

要创建并添加ul元素，有几种实用的方式：

方式1：先创建ul，再追加到目标容器 #

比如要把ul加到页面的<body>里：

$(document).ready(function() {
  // 创建ul元素，还能直接给它加属性，比如id、class
  let newUl = $('<ul>', {
    id: 'new-name-list',
    class: 'list-group'
  });
  // 把这个ul追加到body里
  $('body').append(newUl);
  
  // 之后还能给这个ul加li内容
  let Names = ['Richard', 'Bob', 'John'];
  $.each(Names, function(index, name) {
    $('#new-name-list').append(`<li>${name}</li>`);
  });
});

方式2：创建带li内容的ul，一次性追加 #

如果已经知道要加的li内容，可以直接把ul和li一起创建好再插入：

$(document).ready(function() {
  let Names = ['Richard', 'Bob', 'John'];
  let liHtml = '';
  $.each(Names, function(index, name) {
    liHtml += `<li>${name}</li>`;
  });
  // 创建包含所有li的ul，然后追加到目标容器（比如某个div）
  $('body').append(`<ul id="new-list">${liHtml}</ul>`);
});

方式3：用appendTo简化写法 #

$(document).ready(function() {
  // 创建ul并直接追加到body，还能链式加属性
  $('<ul>').appendTo('body').attr('id', 'quick-list');
  // 接着给这个ul加内容
  $('#quick-list').append('<li>Richard</li><li>Bob</li><li>John</li>');
});

内容的提问来源于stack exchange，提问作者ricsi114