如何用原生JS在列表文本后、缩进列表前无间隔追加指定字符

可以通过原生JavaScript实现该需求，核心思路是定位li元素内的第一个文本节点，对其内容进行修改，避免操作整个innerHTML误伤嵌套的列表结构，同时自动去除原文本末尾的空白字符，保证追加的字符和原文本之间没有空格。

核心实现逻辑 #

• 等待页面DOM加载完成后执行逻辑，适配WordPress等内容动态渲染的场景
• 筛选所有包含嵌套<ul>子元素的<li>节点，也可以根据实际需求调整选择器缩小范围
• 遍历目标<li>的所有子节点，找到第一个类型为文本节点（nodeType === 3）的非空节点
• 对文本节点内容执行trimEnd()去除末尾的换行、空格等空白字符后，拼接需要追加的字符（示例中为冒号）

完整代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  // 可根据实际页面结构调整选择器，比如只处理正文区域的li
  const targetLiList = document.querySelectorAll('li:has(> ul)');
  
  targetLiList.forEach(li => {
    // 遍历子节点找第一个非空文本节点
    for (let node of li.childNodes) {
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
        // 去除末尾空白后追加冒号
        node.textContent = node.textContent.trimEnd() + ':';
        break;
      }
    }
  })
})

旧版浏览器兼容方案 #

如果需要兼容不支持:has()选择器的旧版浏览器，可以替换li筛选逻辑：

// 兼容旧版浏览器的目标li筛选逻辑
const allLi = document.querySelectorAll('li');
const targetLiList = Array.from(allLi).filter(li => {
  return Array.from(li.children).some(child => child.tagName.toLowerCase() === 'ul');
});

该代码运行后会直接在你示例中的Uno、Dos文本末尾拼接冒号，不会出现带空格的情况，也不会修改内部嵌套的列表结构，适配无法自主控制原有HTML的场景。

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