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

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

换句话说，我希望JS在一个页面上触发，该页面的主体类为“ly_productdetails productdetails en_GB”，并注入一些特定的HTML

我是一个JS noob，所以不确定我到底做错了什么

$(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>";
    }
});

$（文档）.ready（函数（）{
如果（$（'body.ly_productdetails productdetails en_GB'）。长度>0）{
var元素=document.getElementById（“容器”）；
element.innerHTML=“产品”；
}
});

任何提示都将不胜感激

---

谢谢

如果

ly\u productdetails

，

productdetails

，

en\u GB

都是类名，你应该做：

body.ly\u productdetails.productdetails.en.en\u 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>";
  }
}

document.addEventListener（“DOMContentLoaded”，函数（）{
if（document.querySelector（“body.ly\u productdetails.productdetails.en.en\u GB”））{
var元素=document.getElementById（“容器”）；
element.innerHTML=“产品”；
}
}

（编辑）好的，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>";
  }
}

$（文档）.ready（函数（）{
if（$（（$body.ly_productdetails.productdetails.en.en_GB”）.length>0）{
var元素=document.getElementById（“容器”）；
element.innerHTML=“产品”；
}
}

试试：

$(function(){
    if ($('body.ly_productdetails.ProductDetails.en.en_GB').length > 0) {
        $('#container').html('<div><h1>Products</h1></div>');
    }
});

$（函数（）{
if（$（'body.ly_productdetails.productdetails.en.en_GB'）。长度>0）{
$（'#container'）.html（'Products'）；
}
});

---

您只是使用了错误的CSS查询。

假设要检查

#容器是否为空，请在jQuery中使用
.is（':empty'）
：



$（文档）.ready（函数（）{
if（$（'body.ly_productdetails.productdetails.en.en_GB'）。长度>0）{
if（$（'div#container'）。是（':empty'））{
$（'div#container'）.html（“产品”）；
}
}
});
空容器被填充

你有几个非常好的答案，我只是插一句，说我更喜欢使用匹配函数（因为它的速度）

$（函数（）{//文档准备就绪
var body=$（document.body）；//body元素
//如果匹配和长度，则修改html
if（body.attr（'class'）.match（/ly\u productdetails productdetails en\u GB/）.length>0）{
$（'#container'）.html（“产品”）；
}
});

小提琴：

速度测试：
检查第二个示例，了解如何使jquery选择器具有多个类如果您希望它成为具有所有这些类的主体，那么选择器应该是
body.ly_productdetails.productdetails.en.en_GB
空格表示具有
en_GB
类的元素中具有
en类的任何元素
ProductDetails
body.ly_ProductDetails
-谢谢Pete。这很好：）不过我认为最好用jQuery来演示一下。如果他是绿色的，那么输入本机函数只会让人感到困惑。@ViktorCarlén哦，我同意，并且刚刚添加了jQuery版本。：d圆点成功了。谢谢（是的，目前非常环保）这很有趣。所以从性能角度来看，使用“匹配”会更好？谢谢
$(function() {    // document ready
    var body = $(document.body);    // body element

    // If match and length then modify html
    if (body.attr('class').match(/ly_productdetails ProductDetails en en_GB/).length > 0) {
        $('#container').html("<div><h1>Products</h1></div>");
    }
});