Как добавить div с тегом script в тег li? - PullRequest
Новая
       16

Как добавить div с тегом script в тег li?

0 голосов
/ 19 мая 2018

У нас есть <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>

Ответы [ 3 ]

0 голосов
/ 19 мая 2018

Используйте свойство lastChild ul.

Попробуйте изменить последнюю строку на:

ulList.lastChild.append(divTag);

0 голосов
/ 19 мая 2018

Следующее решение добавит div с тегом script в нужный тег li: 

$("#footer-menu li").last().append('<div id="somevalue"><script async="async" crossorigin type="text/javascript" src="some-src"></script></div>');
0 голосов
/ 19 мая 2018

Вы не вызываете анонимную функцию, используйте вместо этого: 

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