How to inject HTML in to a specific div with Javascript

Question

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/

are you trying to use regex to find the body element you're looking for? do you really have more than one body element on the page? — DLeh
– DLeh, Commented Apr 9, 2015 at 13:18
The problem is with your regex. You should consider more simple ways to query for an element with jQuery. — Marco Aurélio Deleu
– Marco Aurélio Deleu, Commented Apr 9, 2015 at 13:18

Josh · Accepted Answer · 2015-04-09 13:19:04Z

10

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.

answered Apr 9, 2015 at 13:19

Josh

3,2982 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam C Over a year ago

Thanks - I changed to this and it worked. Strangely, taking the double quotes out and replacing with single broke it. Leaving as is worked fine.

sEver · Accepted Answer · 2015-04-09 13:20:59Z

2

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

edited Apr 9, 2015 at 13:20

answered Apr 9, 2015 at 13:18

sEver

2,4311 gold badge20 silver badges11 bronze badges

1 Comment

Boldewyn Over a year ago

Also, #main .container matches no element, there is one space too much. #main.container would do.

rxjmx · Accepted Answer · 2015-04-09 13:20:51Z

1

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

answered Apr 9, 2015 at 13:20

rxjmx

2,1791 gold badge13 silver badges22 bronze badges

Comments

Randy Hunt · Accepted Answer · 2015-04-09 13:21:35Z

1

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

answered Apr 9, 2015 at 13:21

Randy Hunt

4253 silver badges10 bronze badges

Comments

Dhunt · Accepted Answer · 2015-04-09 13:25:52Z

1

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/

answered Apr 9, 2015 at 13:25

Dhunt

1,5949 silver badges22 bronze badges

Comments

Marco Mendão · Accepted Answer · 2015-04-09 13:33:05Z

1

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

answered Apr 9, 2015 at 13:33

Marco Mendão

3292 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to inject HTML in to a specific div with Javascript

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related