如何向列表插入首个元素？解决cloneNode插入li时首a标签缺失问题

安全阿岳

2026-5-7

问题解答

一、解决你当前代码的标签缺失问题

你的代码里第一个

没有标签，核心原因是操作顺序错误：你在第一次循环时，先克隆了还未添加的

插入到列表，之后才把追加到原

中，导致第一个插入的

是空的。

看你原来的关键逻辑：

for (i = 0; i < arr_RU.length; i++) {
  li.className = "alphabet__item";
  anchor.href = '#'+arr_RU[i];
  anchor.innerText = arr_RU[i];
  ul.appendChild(li.cloneNode(true)); // 这里克隆的li还没有anchor！
  li.appendChild(anchor); // 这一步才把anchor加到原li，晚于克隆插入
}

更稳妥的修复方案是每次循环创建新的

和元素，避免复用同一个元素导致的逻辑混乱，代码如下：

let alphabet = document.querySelector('.alphabet'); 
let ul = document.createElement("ul"); 
ul.className = "alphabet__list"; 
alphabet.appendChild(ul); 

let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я']; 

for (let i = 0; i < arr_RU.length; i++) { 
  // 每次循环新建li和anchor，保证每个元素独立
  let li = document.createElement("li"); 
  let anchor = document.createElement('a'); 
  
  li.className = "alphabet__item"; 
  anchor.href = '#' + arr_RU[i]; 
  anchor.innerText = arr_RU[i]; 
  
  li.appendChild(anchor); 
  ul.appendChild(li); 
}

如果坚持要用cloneNode，需要调整操作顺序，先把加到原

，再克隆插入，同时注意每次循环更新内容后清空原li的旧内容：

let alphabet = document.querySelector('.alphabet'); 
let ul = document.createElement("ul"); 
let li = document.createElement("li"); 
let anchor = document.createElement('a'); 
ul.className = "alphabet__list"; 
alphabet.appendChild(ul); 

let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я']; 

li.className = "alphabet__item";
for (let i = 0; i < arr_RU.length; i++) { 
  anchor.href = '#' + arr_RU[i]; 
  anchor.innerText = arr_RU[i]; 
  li.innerHTML = ''; // 清空原li内容，避免重复添加anchor
  li.appendChild(anchor); 
  ul.appendChild(li.cloneNode(true)); // 现在克隆的li已经包含最新的anchor
}

二、向列表中插入首个元素的方法

如果需要在已有的列表最前面插入首个元素，有两种常用方法：

方法1：使用`prepend()`方法

这是最简洁的方式，直接将元素插入到父元素的子元素最前面：

const firstLi = document.createElement('li');
firstLi.innerHTML = '<a href="#first">首个元素</a>';
ul.prepend(firstLi);

方法2：使用`insertBefore()`方法

通过指定插入位置为列表的第一个子元素（如果列表为空，ul.firstChild为null，会自动插入为最后一个元素，也就是首个元素）：

const firstLi = document.createElement('li');
firstLi.innerHTML = '<a href="#first">首个元素</a>';
ul.insertBefore(firstLi, ul.firstChild);

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

如何向列表插入首个元素？解决cloneNode插入li时首a标签缺失问题

一、解决你当前代码的标签缺失问题 #

二、向列表中插入首个元素的方法 #

方法1：使用prepend()方法 #

方法2：使用insertBefore()方法 #

一、解决你当前代码的标签缺失问题

二、向列表中插入首个元素的方法

方法1：使用`prepend()`方法

方法2：使用`insertBefore()`方法