Question

我正在尝试将HTML注入到我无法访问HTML的页面上的div中，但似乎无法正常运行。

HTML结构看起来有点像这样：

<body class="ly_productdetails ProductDetails en en_GB">
    <div id="page">
    <div class="container">
        <div id="main" class="container">
            <div id="info">
                <h2 itemprop="name">Product Name</h2>
                <p><span itemprop="price">&pound;55.00</span></p>
                </div>
            </div>
        </div>
    </div>
</body>

并且JS看起来像这样：

$(document).ready(function() {   
    var $body = $(document.body);   
    if (body.attr('class').match(/body.ly_productdetails.ProductDetails.en.en_GB/).length > 0) {
        $('#main .container').prepend("<div id="recommendations"><ul<li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>");
    }
});

对于JS来说，我很绿，所以我对上述内容没有信心，但看不出我做错了什么。

有人可以看看，让我知道我做错了什么吗？

提前致谢，

亚当

JS小提琴https://jsfiddle.net/zL8L7zdk/

Answer 1

三件事。

1）body未定义。您定义了$body
2）您的RegEx无法正确评估。

"ly_productdetails ProductDetails en en_GB".match(/body.ly_productdetails.ProductDetails.en.en_GB/);返回null。

如果你想确保正文包含所有这些类，请改为：

$body.is(".ly_productdetails.ProductDetails.en.en_GB")

这将按照特定顺序匹配这些类。

3）你在双引号字符串中使用了双引号。在HTML字符串中用"替换'的实例。

Answer 2

问题似乎在于：

$('#main .container').prepend("<div id="recommendations"><ul<li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>");

尝试使用＆＃39; single＆＃39;而不是＆＃34; double＆＃34;引用html内容，容器的选择器应该没有空格，也是开头ul标签中的拼写错误

试试这样：

$('#main.container').prepend('<div id="recommendations"><ul><li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>');

Answer 3

您的代码中存在语法错误。

var body应为var $body

<div id="recommendations">应为<div id='recommendations'>

您必须在双引号内使用单引号，反之亦然。

您的比赛也是错误的，您不需要查看长度：

/ly_productdetails ProductDetails en en_GB/

https://jsfiddle.net/zL8L7zdk/2/

试试这个：

$(document).ready(function() {   
    var $body = $(document.body);   
      if ($body.attr('class').match(/ly_productdetails ProductDetails en en_GB/)) {
    $('.container').append("<div id='recommendations'><ul<li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>");
}
});

Answer 4

我看到两个问题：

首先，你的正则表达式不起作用。请尝试使用jQuery is()。

if ($('body').is(".ly_productdetails.ProductDetails.en.en_GB") {

其次，您的HTML字符串会被冲突的双引号破坏。使用单引号''来包装HTML，以便属性中的双引号""不会破坏字符串。

$('#main .container').prepend('<div id="recommendations"><ul<li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>');

Answer 5

我不相信你需要使用正则表达式，因为使用jquery选择器会做同样的事情。试试这个：

$(document).ready(function() {  
    if ($("body.ly_productdetails.ProductDetails.en.en_GB").length > 0) {
        $('#main.container').prepend('<div id="recommendations"><ul><li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>');
    }
});

https://jsfiddle.net/zL8L7zdk/6/

Answer 6

我不知道你是否使用jquery。

但如果你按照这个例子。

$(document).ready(function() {   
    $(".ly_productdetails.ProductDetails.en.en_GB").append('<div id="recommendations"><ul<li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>');
});

https://jsfiddle.net/Menda0/zL8L7zdk/10/

您需要使用选择器选择DOM对象。以下是关于此主题的一些阅读http://www.w3schools.com/cssref/css_selectors.asp

如何使用Javascript将HTML注入特定的div

6 个答案: