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

你没有调用匿名函数，而是使用它：

＆＃13;

(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);
})();

＆＃13;

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

＆＃13;

Answer 2

使用ul。

的lastChild属性

尝试将最后一行更改为：

ulList.lastChild.append(divTag);

Answer 3

以下解决方案会将带有div标记的script附加到所需的li代码中：

$("#footer-menu li").last().append('<div id="somevalue"><script async="async" crossorigin type="text/javascript" src="some-src"></script></div>');

如何将带有脚本标记的div附加到li标签中？

3 个答案: