JavaScript用appendChild向LI列表添加span节点时报错，函数内外执行不一致

• 脚本执行时机不匹配：JS文件在head标签中引入时，代码执行阶段浏览器尚未解析到页面下方的DOM结构，执行document.getElementsByTagName("LI")会拿到空的类数组对象，后续循环不存在可操作的目标节点，无法完成节点追加。
• 循环边界越界错误：原循环判断条件为i <= listcheck.length，DOM类数组索引从0开始，有效索引范围为0 ~ 类数组长度-1，当i等于类数组长度时，对应节点为undefined，执行appendChild会直接抛出语法错误，中断全部后续逻辑。
• 类名与文本赋值错误：给span设置class时，先赋值"close"，后续拼接"closeicon"未添加空格，最终生成的类名为closecloseicon，无法匹配CSS选择器；同时创建×文本节点后，通过span.textContent = "X"覆盖了之前的文本节点，预先编写的文本创建逻辑完全失效。
• 动态节点逻辑缺失：初始执行的追加span逻辑为一次性流程，后续通过searchinput函数新建的li节点未接入追加span的流程，新建列表项自然不存在关闭按钮。
• 初始DOM结构不匹配：当前HTML中myUL标签初始为空，原本显示为“Javascript”的内容是label标签，并非li节点，即便脚本等DOM加载完成，初始遍历也无法匹配到任何li元素，没有可追加节点的目标对象。

首先调整脚本引入位置，将原head中放置的<script src="JS/todo_JS.js"></script>移动到</body>闭合标签之前，同时可将静态展示的Javascript内容移入myUL作为初始列表项，保证初始逻辑有可操作的节点对象。
对应的JS代码调整如下：

// 等待DOM全部解析完成后再执行初始化逻辑，避免DOM未就绪问题
document.addEventListener('DOMContentLoaded', function() {
  const listcheck = document.getElementsByTagName("LI");
  // 循环边界调整为小于数组长度，避免越界
  for (let i = 0; i < listcheck.length; i++) {
    // 调用公共逻辑给每个li追加关闭按钮
    appendCloseBtn(listcheck[i]);
  }
})

// 抽离公共的关闭按钮追加逻辑，供初始节点、新建节点复用
function appendCloseBtn(targetLi) {
  const span = document.createElement("SPAN");
  const txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  // 类名拼接时添加空格，保证CSS选择器匹配
  span.className += " closeicon";
  targetLi.appendChild(span);
}

function searchinput() {
  const li = document.createElement("li");
  const inputtext = document.getElementById("client_course").value;
  const t = document.createTextNode(inputtext);
  document.getElementById("myUL").appendChild(li);
  li.appendChild(t);
  // 给新建的li节点执行追加关闭按钮的逻辑
  appendCloseBtn(li);
}

补充说明：原代码中全部使用var声明变量，这类声明存在作用域提升特性，循环内定义的同名span变量会被提升到全局作用域，在复杂场景下容易引发变量污染问题，修正代码中替换为let/const声明即可规避这类隐患。

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