Javascript 为什么jQuery cycle插件没有'；不行？

我编写了一个函数，将一些HTML代码附加到页面，如下所示：

function addGiftList(className, imgURL, Kind) {
    var $li = $('<li class="' + className + '">');
    var $img = $("<img>", { src: imgURL })
    var $br = $("<br/>");
    var $input = $('<input >', { type: 'radio', name: 'gift', kind: Kind });
    var $label = $("<label>").text("Test");

    $li.append($img);
    $li.append($br);
    $li.append($input);         
    $li.append($label);
    return $li;         
}

函数addGiftList（类名、imgURL、种类）{
var$li=$（“
”）；
var$img=$（“”）；
var$input=$（''，{type:'radio'，name:'gift'，kind:kind}）；
var$label=$（“”）。文本（“测试”）；
$li.追加（$img）；
$li.追加（$br）；
$li.append（$input）；
$li.append（$label）；
返回$li；
}

所有这些都将附加到一个具有className

cycle slideshow

的div，然后我调用

$（'.cycle slideshow'）.cycle（），但什么也没发生。有人知道为什么吗？
我可以用javascript创建HTML元素，然后调用jQuery cycle插件吗？
HTML

<button>append</button>
<div class="myslider composite-example" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-timeout="2000">
  <div>
    <img src="http://malsup.github.io/images/p1.jpg" width=100%>
    <div class="cycle-overlay">first image</div>
  </div>
  <div>
    <img src="http://malsup.github.io/images/p2.jpg" width=100%>
    <div class="cycle-overlay">second image</div>
  </div>
</div>

JS

 body {
  width: 200px;
  margin: auto;
}

img {
  width: 200px;
}

 // first call cycle
    $('.myslider').length > 0 && $('.myslider').cycle();

    function addGiftList(className, imgURL, Kind) {
        var $div = $('<div class="' + className + '">');
        var $img = $("<img>", {
                src: imgURL
            })
        var $input = $('<input >', {
            type: 'radio',
            name: 'gift',
            kind: Kind
        });
        var $label = $("<label>").text("Test");
        $div.append($img);
        $div.append($input);
        $div.append($label);

        // dynamically adding slider: this is a plugin method see documentation
        $('.myslider').cycle('add', $div);

        return;
    }

    // dynamic add button for example
    $('button').on('click', function() {
        // add function for example
        addGiftList('myclass cycle-slide', 'https://placeholdit.imgix.net/~text?txtsize=15&txt=image%20added&w=200&h=150&txttrack=0');
    })

//第一个调用周期
$（'.myslider'）.length>0&$（'.myslider'）.cycle（）；
函数addGiftList（类名、imgURL、种类）{
变量$div=$（''）；
变量$img=$（“'）{
键入：“收音机”，
姓名：'礼物'，
种类：种类
});
var$label=$（“”）。文本（“测试”）；
$div.append（$img）；
$div.append（$input）；
$div.append（$label）；
//动态添加滑块：这是一种插件方法，请参阅文档
$（'.myslider'）.cycle（'add'，$div）；
返回；
}
//例如，动态添加按钮
$（'button'）。在（'click'，function（）上{
//例如，添加函数
addGiftList（'myclass循环幻灯片'，'https://placeholdit.imgix.net/~text？txtsize=15&txt=image%20添加&w=200&h=150&txtrack=0'）；
})

请看我的代码笔的这个链接。我已经解决了你的问题。
您检查过控制台有无错误吗？控制台上没有显示任何内容。谢谢，请显示您的
cycle
方法在初始化组件之前确保您正在加载插件的js。谢谢回复。我从其网站下载了cycle js文件。@aBloomer请检查此解决方案。