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中完美运行，但它在我的Squarespace网站中不起作用。

我网站上的代码如下：

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

知道为什么它在squarespace中不起作用？

谢谢！

Answer 1

您是否尝试过使用类似

的内容

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

加载脚本然后激活xMinicart对象？我无法理解为什么你在没有更多背景的情况下尝试这样做，这是我能提供的最佳建议。

https://api.jquery.com/jQuery.getScript/（使用GET HTTP请求从服务器加载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

您正在做的是您只是将脚本作为Text或innerText附加到HTML DOM结构中。使用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");
  });

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

在这里查看Jsfiddle http://jsfiddle.net/u3NKD/6/

如何使用.append（）添加此类

3 个答案: