如何使用.append()添加该类

Question

我有以下html代码：

<nav id="main-navigation">    
<ul class="cf">

<li class=" active-link">
<a href="/">Home</a>
</li>

</ul>  
</nav>

我需要在</ul>标记之前添加以下代码：

<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script> 
</li>

然而，要做到这一点，我必须使用jquery的append()。但是，我不知道在append()中添加script type="text/javascript"、src="https://app.ecwid.com/script.js?4549118"></script>和<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>的正确方法。

谢谢!

编辑1:

所以你可以看到我想做的事情:我需要的是下面的http://jsfiddle.net/u3NKD/5/，结果是两个链接。但是，第二个链接(上面写着"sacola de compras“)必须使用append()，而不是html。

编辑2:

我尝试了这个Jsfiddle http://jsfiddle.net/u3NKD/7/中的代码，它在Jsfiddle中工作得很好，但是它在我的Squa呼吸道网站上不起作用。

我的网站上的代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

<script>
window.onload=function(){ 
$('nav ul').append('<li id="hello"></li>');
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
    xMinicart("style=","layout=Mini","id=hello");
}); 
}
</script>

知道为什么它在广场上不起作用吗？

谢谢!

Answer 1

你有没有试过用类似的

$.getScript("https://app.ecwid.com/script.js?4549118", function(){
    xMinicart("style=","layout=Mini");
}); 

加载脚本，然后激活xMinicart对象？我真的不明白你为什么要在没有更多的上下文的情况下做这件事，所以这是我能提供的最好的建议。

https://api.jquery.com/jQuery.getScript/ (使用GET请求从服务器加载JavaScript文件，然后执行它)。

Answer 2

如果确实需要将其放置到特定的位置，请尝试如下:在同一个目录中创建一个单独的html文件，将其称为类似于myli.html的内容，然后将其放入其中：

<ul id="myli">
  <li class="">
   <script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
   <script type="text/javascript">xMinicart("style=","layout=Mini"); </script> 
  </li>
</ul>

然后，在您想要这个附加的原始页面中，您必须创建这样一个虚拟容器

$('<div/>', {id:'dummycont', css: {display: 'none'}}).appendTo('body');

然后

$('#dummycont').load('myli.html #myli, function(){
    var li = $(this).find('#myli').html();
    $('nav ul').prepend(li);
});

因此，这个load事件基本上会将myli.html中的特定#myli加载到临时虚拟容器中。然后你抓起那些内容，并把它加到目标ul上。如果这对你有用的话请告诉我。我还没试过呢。

Answer 3

您所做的只是将脚本作为文本或innerText附加到HTML结构中。使用getScript或Ajax调用调用Js。(带有返回类型脚本的Ajax调用是一个getScript)

并在其返回函数中调用xMinicart函数。

在您的Dom中，只需用特定的id附加一个'li‘，在getScript成功函数中，将id传递给xMinicart函数/

    <nav id="main-navigation">    
     <ul class="cf">

      <li class=" active-link">
        <a href="/">Home</a>
      </li>
      <li id="hello"></li>    
     </ul>

   </nav>

你的Js电话应该是

$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
  });

这将在页面上加载购物车。

看看这里的小提琴，http://jsfiddle.net/u3NKD/6/