javascript - 使用特定的主体类填充页面上的空 div

Question

我正在尝试编写一些 JS 来查找特定的主体类，并用 HTML block 替换页面上找到的空内容。

换句话说，我希望 JS 在主体类为“ly_productdetails ProductDetails en en_GB”的页面上触发，并注入(inject)一些特定的 HTML。

我是一个 JS 菜鸟，所以不太确定我在这里做错了什么。

$(document).ready(function() {
      if ($('body.ly_productdetails ProductDetails en     en_GB').length > 0) {
        var element = document.getElementById("container");
        element.innerHTML = "<div><h1>Products</h1></div>";
    }
});

http://jsfiddle.net/du5rtfw7/

如有任何提示，我们将不胜感激。

谢谢

Answer 1

如果ly_productdetails、ProductDetails、en、en_GB都是类名，您应该这样做:body.ly_productdetails.ProductDetails.en.en_GB。

顺便说一句，你可以在没有 jQuery 的情况下做到这一点:

document.addEventListener("DOMContentLoaded", function () {
  if (document.querySelector("body.ly_productdetails.ProductDetails.en.en_GB")) {
    var element = document.getElementById("container");
    element.innerHTML = "<div><h1>Products</h1></div>";
  }
}

(编辑)好的，jQuery 版本:

$(document).ready(function() {
  if ($("body.ly_productdetails.ProductDetails.en.en_GB").length > 0) {
    var element = document.getElementById("container");
    element.innerHTML = "<div><h1>Products</h1></div>";
  }
}