时间戳

首页 > 解决方案 > 如何将带有脚本标签的 div 附加到 li 标签中？

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

问题描述

我们有一个<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>

标签： javascriptjqueryhtmlhtml-lists

解决方案

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

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

推荐阅读