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

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

javascript jquery html

如何使用Javascript将HTML注入到特定的div中,javascript,jquery,html,Javascript,Jquery,Html,我试图将HTML注入到一个页面上的div中，但我无法访问HTML，但似乎无法正确使用该函数 HTML结构看起来有点像这样： <body class="ly_productdetails ProductDetails en en_GB"> <div id="page"> <div class="container"> <div id="main" class="container"> <d

我试图将HTML注入到一个页面上的div中，但我无法访问HTML，但似乎无法正确使用该函数

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>

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

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


品名
&磅；55.00

JS看起来像这样：

<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>

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

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

$（文档）.ready（函数（）{
var$body=$（document.body）；
if（body.attr（'class'）.match（/body.ly_productdetails.productdetails.en.en_GB/）.length>0）{
$（“#main.container”）.prepend（问题似乎出在以下几行：
$('#main .container').prepend("<div id="recommendations"><ul<li>Cross sell 1</li><li>Cross sell 2</li><li>Cross sell 3</li></ul></div>");

$（“#main.container”）.prepend（三件事
1） 未定义body
。您定义了$body


2） 您的正则表达式计算不正确
“ly_productdetails productdetails en_GB.”匹配（/body.ly_productdetails.productdetails.en.en_GB/）；
返回null

如果要确保主体具有所有这些类，请执行以下操作：
$body.is（“.ly\u productdetails.productdetails.en.en\u GB”）

这将不按特定顺序匹配这些类
3） 您在双引号字符串中使用了双引号。请将HTML字符串中的“
实例替换为”
。
您的代码中存在语法错误
var-body
应为var$body

应该是

必须在双引号内使用单引号，反之亦然
您的匹配也是错误的，您不需要检查长度：
/ly\u productdetails productdetails en\u GB/


试试这个：
$(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>");
}
});

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

$（文档）.ready（函数（）{
var$body=$（document.body）；
if（$body.attr（'class'）.match（/ly\u productdetails productdetails en\u GB/）{
$（'.container'）.append（我看到两个问题：
首先，正则表达式不起作用。请尝试改用jQueryis（）

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>');

$（“#main.container”）.prepend（“我认为您不需要使用正则表达式，因为使用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>');
    }
});

$（文档）.ready（函数（）{
if（$（（$body.ly_productdetails.productdetails.en.en_GB”）.length>0）{
$（“#main.container”）.prepend（“交叉销售1
交叉销售2
交叉销售3”）；
}
});

我不知道您是否在使用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>');
});

$（文档）.ready（函数（）{
$（“.ly\u productdetails.productdetails.en.en\u GB”）.append（你的jsFoDLE在它刚刚更新它的时候没有那个JS——你想用正则表达式来找到你想要的身体元素吗？你在页面上真的有不止一个<代码>正文< /代码>元素吗？问题在于你的正则表达式。你应该考虑用jQuery来查询一个元素的更简单的方法。不匹配任何元素，有一个空格太多。#main.container
就可以了。谢谢-我改成了这个，它成功了。奇怪的是，去掉双引号并替换为单引号破坏了它。按原样离开很好。