javascript - 如何将带有 script 标签的 div 附加到 li 标签中？

Question

我们有一个<ul>有很多<li>用于菜单链接的标签。我们如何将以下代码附加到 <ul> 的末尾？

问题:

我当前的代码甚至没有添加 <div>标签。

目标:始终附加 <li><div><script></script></div></li>作为 <ul class="menu" id="footer-menu"> 的最后一项首先创建 <script>标签，然后将其附加到新创建的<div>标签，然后最后将其附加到 <ul> 的末尾标签。

当前输出:

<ul class="menu" id="footer-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

期望的输出:

<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-src"></script></div></li>
</ul>

(function() {
  var scriptTag = document.createElement('script');
  scriptTag.type="text/javascript";
  scriptTag.async=true;
  scriptTag.crossOrigin=true;
  scriptTag.src="some-source";
  
  var divTag = document.createElement('div');
  divTag.id='somevalue';
  divTag.append(scriptTag);
  var ulList = document.getElementById('footer-menu');
  ulList.append(divTag);
});

<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>

Answer 1

您没有调用匿名函数，请使用它:

(function() {
  var scriptTag = document.createElement('script');
  scriptTag.type="text/javascript";
  scriptTag.async=true;
  scriptTag.crossOrigin=true;
  scriptTag.src="some-source";
  
  var divTag = document.createElement('div');
  divTag.id='somevalue';
  divTag.append(scriptTag);
  
  var liTag = document.createElement('li');
  liTag.append(divTag);
  
  var ulList = document.getElementById('footer-menu');
  ulList.append(liTag);
})();

<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>