如何将含script标签的div封装进li后追加到指定ul末尾？

我看到你的问题啦——你当前的代码是直接把包含script的div追加到了footer-menu这个ul里，但漏掉了最关键的一步：把div放进li标签中，所以没法生成你想要的<li><div><script></script></div></li>结构。咱们只需要在代码里加几步就能搞定：

修正后的JavaScript代码 #

(function() { 
  // 创建script标签并设置属性
  var scriptTag = document.createElement('script');
  scriptTag.type="text/javascript";
  scriptTag.async=true;
  scriptTag.crossOrigin=true;
  scriptTag.src="some-source";

  // 创建div标签并设置id，把script放进去
  var divTag = document.createElement('div');
  divTag.id='somevalue';
  divTag.append(scriptTag);

  // 新增：创建li标签，把div放进去
  var liTag = document.createElement('li');
  liTag.append(divTag);

  // 获取目标ul，把li追加到末尾
  var ulList = document.getElementById('footer-menu');
  ulList.append(liTag);
})(); // 补全自执行函数的调用括号，原来的代码只定义了函数但没执行

对应的HTML代码（无需改动） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu" id="footer-menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

改动说明 #

• 新增了创建li元素的步骤，把之前的div嵌套进这个li里面
• 最后把li（而不是直接把div）追加到目标ul的末尾
• 补全了自执行函数的调用括号()，确保代码能正常执行

这样运行后，生成的DOM结构就和你期望的完全一致啦：

<ul class="menu" id="footer-menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li><div id='somevalue'><script async="async" crossorigin type="text/javascript" src="some-source"></script></div></li>
</ul>

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