Add HTML between div with jQuery

Question

I have this code:

jQuery('.post-single-content').addClass('padT');            
jQuery('.post-single-content').css("padding-top", "40px");

It basically converts this:

<div class="post-single-content">

into this:

<div class="post-single-content padT" style="padding-top: 40px;">

I am however trying to change the code so it converts it into something like this:

<div class="post-single-content">
<a href="../index.html"><img src="../spacer.jpg"></a>

Could someone tell me how to do this. I've tried to use a few examples from here but had no luck. Any help would be appreciated.

Pedro Lobito · Accepted Answer · 2015-04-19 00:11:20Z

1

Use append, llike this:

$('.post-single-content').append('<a href="../index.html"><img src="../spacer.jpg"></a>');

CODEPEN DEMO

answered Apr 19, 2015 at 0:11

Pedro Lobito

99.8k36 gold badges274 silver badges278 bronze badges

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

1 Comment

Ron Over a year ago

Thank you! It work :). I ended up using .prepend instead of .append to get it to appear at the start of the div tag.

mcserep · Accepted Answer · 2015-04-19 00:08:58Z

1

You may use jQuery to dynamically create new DOM objects and append them to an existing one:

var div = $('.post-single-content');
var link = $('a').attr('href', '../index.html');
var image = $('img').attr('src', '../spacer.jpg');
div.append(link.append(image));

answered Apr 19, 2015 at 0:08

mcserep

3,29925 silver badges37 bronze badges

Comments

Ropota Rafael · Accepted Answer · 2015-04-19 00:17:20Z

1

You can use the function after()

$(".post-single-content").after( '<a href="../index.html"><img src="../spacer.jpg"></a>' );

This solution adds the element after the .post-single-content div. You should use append():

$(".post-single-content").append( '<a href="../index.html"><img src="../spacer.jpg"></a>' );

edited Apr 19, 2015 at 0:17

answered Apr 19, 2015 at 0:08

Ropota Rafael

854 bronze badges

1 Comment

mcserep Over a year ago

This solution would add the new content after the div, and not inside in it. You might want to use append instead.

SSharp · Accepted Answer · 2015-04-19 00:18:31Z

If it's just a single div you are trying to manipulate add an id.

<div id="divToChange" class="post-single-content padT" style="padding-top: 40px;"></div>

Then create the elements and append (a little more verbose than the other solutions, but never hurts to see a different way).

$(document).ready(function () {

    var targetDiv = $('#divToChange');

    var aTag = document.createElement('a');
    aTag.href = '../index.html';

    var imgTag = document.createElement('img');
    imgTag.src = '../spacer.jpg';

    $(imgTag).appendTo(aTag);
    $(aTag).appendTo(targetDiv);
});

Results in the following:

<div id="divToChange" class="post-single-content padT" style="padding-top: 40px;"><a href="../index.html"><img src="../spacer.jpg"></a></div>

Collectives™ on Stack Overflow

Add HTML between div with jQuery

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related