Dynamically warping an image inside an anchor tag [jQuery]

Question

I have a table data like this:

<td id="tinkerDiv1">
    <a id="slugTinker1"><img id="imageTinker"></a>
</td>

I am trying to change the image and the anchor link with ajax. On the success function of ajax I have:

success: function(data) {
            console.log('Id:' +data.post.id);
            //var imgname = data.post.image;
            var image = "{{ asset('/frontend/img/uploads/') .'/' }}" + data.post.image;
            var img = $('<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;">');
            img.attr('src', image);

            img.appendTo('#tinkerDiv1');
            var slug = "{{ url('/post/') .'/' }}" + data.post.slug;
            var sluglink1 = $('#slugTinker1');
            sluglink1.attr('href', slug);
}

Expected Output:

<a id="sluglink1" href="someurl.html">
    <img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;" src="someimage.jpg">
</a>

But I am getting something like this:

<a id="sluglink1" href="someurl.html"></a>
<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;" src="someimage.jpg">

Problem: The anchor tag is not wraping the Image tag.

`img.appendTo('#tinkerDiv1');` change to append to anchor not in the div. like `img.appendTo('#sluglink1');` — guradio, Jun 29 '17 at 05:25
I think [this code](https://stackoverflow.com/a/1767536/6519005) will be help for you. Good Luck! — KRIPS, Jun 29 '17 at 05:33
@KRIPS just a though if you want to help add in comment what you think the link have that might help the OP then post the link for reference. Not only posting a link with out any explanation as to how it can help the OP. — guradio, Jun 29 '17 at 05:38

score 3 · Answer 1 · answered Jun 29 '17 at 05:27

3

The issue is with this img.appendTo('#tinkerDiv1'); tinkerDiv1 is the id of the the td.

Replace this with

$("#sluglink1").append(img)

answered Jun 29 '17 at 05:27

brk

48,835
10
56
78

score 2 · Answer 2 · answered Jun 29 '17 at 05:28

Please check below code. It will help you.

success: function(data) {
            console.log('Id:' +data.post.id);
            //var imgname = data.post.image;
            var image = "{{ asset('/frontend/img/uploads/') .'/' }}" + data.post.image;
            var img = $('<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;">');
            img.attr('src', image);

            var slug = "{{ url('/post/') .'/' }}" + data.post.slug;
            var sluglink1 = $('#slugTinker1');
            sluglink1.attr('href', slug);
            sluglink1.html(img);
            sluglink1.appendTo('#tinkerDiv1');
}

score 1 · Accepted Answer · answered Jun 29 '17 at 05:28

1

You are appending to div, you have to do this

img.appendTo('#slugTinker1');

answered Jun 29 '17 at 05:28

Vigneshwaran Markandan

947
1
16
37

Dynamically warping an image inside an anchor tag [jQuery]

3 Answers3