Javascript 在多个元素上运行的函数可插入多个图像

我有一个函数，当您滚动到页面底部时，它会在多个li元素上调用。该函数删除一个类，并基于每个li的数据属性创建一个图像元素：

function createImg(param) {
    var img = $('<img>');
    img.attr('src', $(this).attr("data-src"));
    img.appendTo(this);
}

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
    $("li.hidden").slice(0, 2).removeClass('hidden').each(createImg);
});

<ul>
                <li class="hidden" data-src="img/1.jpg">
                    <p>1</p>
                </li>

                <li class="hidden" data-src="img/2.jpg">
                    <p>2</p>
                </li>

                <li class="hidden" data-src="img/3.jpg">
                    <div class="image-cont"></div>
                    <p>3</p>
                </li>
</ul>

函数createImg（param）{
变量img=$（'

一,



二,



三,

但是现在我想在li中的div.image-cont中创建图像。我尝试了下面的javascript，但它在每个div.image-cont中创建了多个图像，而不是每个div.image-cont中仅创建一个图像：

function createImg(param) {
        var img = $('<img>');
        img.attr('src', $(this).attr("data-src"));
        img.appendTo(".image-cont", this);
    }

<ul>

                    <li class="hidden" data-src="img/1.jpg">
                       <div class="image-cont"></div>
                        <p>1</p>
                    </li>

                    <li class="hidden" data-src="img/2.jpg">
                       <div class="image-cont"></div>
                        <p>2</p>
                    </li>

                    <li class="hidden" data-src="img/3.jpg">
                        <div class="image-cont"></div>
                        <p>3</p>
                    </li>
    </ul>

函数createImg（param）{
变量img=$（'

一,



二,



三,

函数createImg（参数）{
变量img=$（'
使用append而不是appendTo解决了这个问题。
请在回答中始终包括对代码的解释，以便将来的读者更好地理解其目的。
function createImg(param) {
    var img = $('<img>');
    img.attr('src', $(this).attr("data-src"));
    //img.appendTo(".image-cont", this);
    $(".image-cont", this).append(img);
}