无法将HTML附加到现有元素

Question

遇到一个我无法理解的问题。尝试在正在构建的网站上的现有块中输入一些HTML，但是只能使代码在控制台中工作，而不能在主题的JS输入字段中工作。

如果您在DevTools中运行以下JS，则网站为jck-sports.co.uk，位于主页上“新行”部分：

jQuery(document).ready(function($){

var link;
    var btnStart = "<div class='product-actions'><div class='product-actions-inner'><div class='product-action product-action-add-to-cart'><a class='button product_type_variable add_to_cart_button' href='" + link + "' rel='nofollow'>Select options</a></div></div></div>";

    $(".new-lines-homepage-container .wvs-pro-product").each(function(){
        $(this).addClass('product-hover-style-info-bottom','product-hover-button-shape-square','product-hover-act-position-center','product_title_type-full','product_icon_type-line-icon');
        link = $(this).find(".product-thumbnail-inner > a").attr("href");

        $(this).append(btnStart); // Will only show "Select options" and no other HTML in the DOM

        console.log("<div>test</div>"); // Will only show "test" with no DIV's.
    });

});

它将按钮添加到正确的位置，但是当像我一样将代码添加到主题中时，我所有其他JS都将不起作用，仅添加“选择选项”文本，但会去除所有其他HTML，即使我将某些HTML控制台记录为字符串，它也不会。关于如何解决此问题的任何想法，还是我缺少什么？

根据主题需要准备好文档，否则它将不会加载任何Jquery。

Answer 1

第一：确保您的输出JS具有所需的HTML结构。在您的情况下，我看到该变量只有纯“选择选项”文本作为屏幕截图。

第二个：link变量在每个循环中都会更新，但是btnStart将不会更新，并且始终具有undefined链接。您也应该修复代码的逻辑。

Answer 2

解决了。好吧，问题出在内置的自定义JS字段中，因为它安装了另一个插件来管理我的JS，并且可以正常工作。