如何用JavaScript获取嵌套ul li元素并覆写文本？

问题场景 #

现有嵌套UL/LI结构的HTML，点击触发cambiar_parrafo_2函数后，输入框显示但输入内容无法覆写内层LI的文本。原始代码如下：

原始HTML #

<div class="row">
   <div class="col-12 col-md-6">
   <h3 class="h3 generalfont">Industry Experience</h3>
      <article>
           <ul>
              <li>
                  Project FIUBA, Algorithms and Programming I, Argentina, 2021
                  <ul>
                     <li>Project FIUBA, Algorithms and Programming I, Argentina, 2022</li>
                  </ul>
              </li>
            </ul>
      </article>

      <div>
      <input id="edit-aboutme" type="text" oninput="asignar_palabras_2(this.value)" style="display: none;">
      </div>
   </div>
</div>

原始JavaScript #

function cambiar_parrafo_2(){
  document.querySelector("input").style.display = "inline";
  let container = document.querySelector(".col-12");
  let texto = container.querySelectorAll("article > ul > li");
  for (let i = 0; i < texto.length; i++) {
    texto[i].textContent = "";
  }
}

function asignar_palabras_2(value) {
  let container = document.querySelector(".col-12");
  let texto = container.querySelectorAll("article > ul > li > ul > li");
  for (let i = 0; i < texto.length; i++) {
    texto[i].textContent = value;
  }
}

问题根源 #

cambiar_parrafo_2函数中使用texto[i].textContent = ""清空外层LI内容时，会彻底删除该LI下的所有子节点（包括内层的UL和LI元素），导致后续asignar_palabras_2无法通过选择器找到目标内层LI，最终覆写功能失效。

修复方案 #

只需修改cambiar_parrafo_2函数，保留内层UL结构，仅清空外层LI的纯文本内容，以下两种方式任选其一：

方式1：精准删除文本节点 #

遍历外层LI的子节点，仅移除纯文本节点：

function cambiar_parrafo_2(){
  document.querySelector("input").style.display = "inline";
  let container = document.querySelector(".col-12");
  let texto = container.querySelectorAll("article > ul > li");
  for (let i = 0; i < texto.length; i++) {
    // 遍历子节点，只删除类型为文本的节点
    Array.from(texto[i].childNodes).forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        texto[i].removeChild(node);
      }
    });
  }
}

方式2：保留内层UL的HTML结构 #

提取外层LI中的内层UL，重新赋值给外层LI的innerHTML：

function cambiar_parrafo_2(){
  document.querySelector("input").style.display = "inline";
  let container = document.querySelector(".col-12");
  let texto = container.querySelectorAll("article > ul > li");
  for (let i = 0; i < texto.length; i++) {
    const innerUl = texto[i].querySelector("ul");
    // 若存在内层UL则保留，否则清空
    texto[i].innerHTML = innerUl ? innerUl.outerHTML : "";
  }
}

效果验证 #

修改后执行流程：

1. 触发cambiar_parrafo_2，输入框正常显示，外层LI的纯文本被清空，内层UL结构完整保留
2. 在输入框输入内容时，asignar_palabras_2可正常找到内层LI并覆写其文本

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