CODEWITHSUNDEEP
jquery
Nrc
Nrc

Reputation: 9787

Img after a div with jquery

Is it possible to insert an img after a div with jquery? If so how to control its position?

Please try your answer here: http://jsfiddle.net/cPtU9/2/

HTML:

<div id="grey"></div>

CSS:

#grey {
    position: absolute;
    top: 50px; left: 50px;
    width:200px; height: 200px;
    background-color: #eee;
}

JQuery: 

$('#grey').after("<img src='http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png' />");

Upvotes: 0

Views: 173

Answers (4)

Ayush Ghosh
Ayush Ghosh

Reputation: 487

check here Fiddle 

#grey {
    position: relative;
    width:200px; height: 200px;
    background-color: #eee;
}

Positioning absolute will create problem in positioning, Prefer using relative instead.

I have done it, Glad if it works.

Anyways Happy Coding!!!

Upvotes: 1

kebin
kebin

Reputation: 163

Not sure what you are trying to accomplish here. Right now the image is created right after the div...i.e outside the div. If thats intentional, you can do the following css to change the image layout:

#grey{
    position: relative; /*<-- changed to relative*/
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

img{
    position: relative;
    /* additional css goes here */
}

If you are trying to put the image inside the div element then you can use the prepend as follows:

$('#grey').prepend('<img src='http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png' />');

Upvotes: 2

Puttzy
Puttzy

Reputation: 156

Not sure but try

$( "<img src='http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png' />" ).insertAfter( "#grey" );

Upvotes: 0

Jordan
Jordan

Reputation: 2523

Use insertAfter like this &('element').insertAfter('#grey');

Upvotes: 0

Related Questions