javascript - 将 HTML 添加到 Javascript IF 函数

Question

我正在尝试编辑脚本，以便可以使用 HTML 格式化输出，但不确定如何正确格式化它。目前脚本如下，但我想实现的是下面的第二个脚本。我知道第二个脚本没有意义，但我只是想展示我基本上想要实现的目标，但不确定如何实现它。如果有人可以提供帮助，我将不胜感激。

原始脚本:

var selectCallback = function(variant, selector) {
timber.productPage({
  money_format: "{{ shop.money_format }}",
  variant: variant,
  selector: selector
});
if (variant) {
    if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
    jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
    } else {
    jQuery('#variant-inventory').text("This product is sold out");
    }
    } else {
    jQuery('#variant-inventory').text("In stock - order now");
    }
    } else {
    jQuery('#variant-inventory').text("");
    }
};

我想要实现的目标:

var selectCallback = function(variant, selector) {
timber.productPage({
  money_format: "{{ shop.money_format }}",
  variant: variant,
  selector: selector
});
if (variant) {
    if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
    jQuery('#variant-inventory').text('<div class="stock">We have ' + variant.inventory_quantity + ' in stock.</div>');
    } else {
    jQuery('#variant-inventory').text("<div class="sold-out">This product is sold out</div> - <a href="link">contact us</a>");
    }
    } else {
    jQuery('#variant-inventory').text("<div class="in-stock">In stock</div> - order now");
    }
    } else {
    jQuery('#variant-inventory').text("");
    }
};

Answer 1

不要使用.text()，而是使用.html()

jQuery('#variant-inventory').html('<div class="stock">We have ' + variant.inventory_quantity + ' in stock.</div>');

.text() 只是执行 Element.textContent||Element.innerText||...etc = 的更简单方法，它使用(nodeType3) 字符串，“打印” 标签字符字面量 > < .
另一方面，.html() 是一个 jQuery 方法，它使用 JS 的 Element.innerHTML，它实际上插入类似 HTML 的字符串，使它们成为实际的 DOM 节点。

<小时/>

注意引号!!!这是不正确的:

"<div class="sold-out">This product is sold out</div> - <a href="link">contact us</a>"

应该是:

'<div class="sold-out">This product is sold out</div> - <a href="link">contact us</a>'

就像你在上面做了几行一样......

<小时/>

_{每日提示:}

照顾好你的手指!不要到处写 jQuery，而是将其包装到一个速记 DOM 中，安全地封装 $ 别名:

jQuery(function( $ ) {                          // DOM ready and $ alias secured in scope

  // Your DOM ready code here.
  // Now you're free to use the $ alias and save some bites and finger nails
  $('#variant-inventory').html("YEY!!");

});