CODEWITHSUNDEEP
javascriptjqueryhtml
Adam C
Adam C

Reputation: 75

How to inject HTML in to a specific div with Javascript

I'm trying to inject HTML into a div on a page that I don't have access to the HTML, but can't seem to get the function right.

The HTML structure looks a bit like this:

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

and the JS looks like this:

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

I am green when it comes to JS so I'm, not confident in the above but can't see what I'm doing wrong.

Could some one take a look and let me know what I'm doing wrong?

Thanks in advance,

Adam

JS Fiddle https://jsfiddle.net/zL8L7zdk/

Upvotes: 2

Views: 3934

Answers (6)

Marco Mend&#227;o
Marco Mend&#227;o

Reputation: 329

I don't know if you are using jquery or not.

But if you do follow this example.

$(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/

You need to select a DOM object using selectors. Here is some read about this topic http://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 1

Dhunt
Dhunt

Reputation: 1594

I don't believe you need to use a regex expression as using a jquery selector will do the same thing. Try this:

$(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/

Upvotes: 1

Randy Hunt
Randy Hunt

Reputation: 425

I see two problems:

First, your regular expression doesn't work. Try using jQuery is() instead.

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

Second, your HTML string gets broken by the conflicting double quotes. Use single quotes '' to wrap the HTML so that the double quotes "" in the attributes don't break the string. 

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

Upvotes: 1

sEver
sEver

Reputation: 2305

The problem seems to be in the line:

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

Try using 'single' instead of "double" quotes around the html content, Selector for the container should have no space, also a typo in the opening ul tag

Try it like this:

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

Upvotes: 2

rxjmx
rxjmx

Reputation: 2181

You have syntax errors in your code.

var body should be var $body

<div id="recommendations"> should be <div id='recommendations'>

You have to use single quotes inside double quotes or vice versa.

Your match is also wrong and you don't need to check a length:

/ly_productdetails ProductDetails en en_GB/

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

Try this:

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

Upvotes: 1

Josh
Josh

Reputation: 3288

Three things.

1) body is not defined. You defined $body
2) Your RegEx does not evaluate correctly.

"ly_productdetails ProductDetails en en_GB".match(/body.ly_productdetails.ProductDetails.en.en_GB/); returns null.

If you want to make sure that the body has all those classes, do this instead:

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

This will match those classes in no specific order.

3) You used double-quotes inside a double-quote string. Replace instances of " with ' inside the HTML string.

Upvotes: 10

Related Questions