How to convert a url string to have tag after it so it shows the image?

Question

I don't understand what I am doing wrong.

I have an element

<div class="hello">https://image.png</div>

I want to use juqery to loop through all the elements with .hello and then wrap it with the images tags so the image shows up.

For some reason jquery is spitting out the "Image URLhttps://image.png", as you see it has the "Image URL" text in there thats messing everything up!

Thanks

Does this answer your question? [jQuery add image inside of div tag](https://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag) — itsdarrylnorris, Mar 04 '22 at 22:28
`$('.hello').each((index, item) => { var img = $(item).html(); $(item).html(''); });` — Zak, Mar 04 '22 at 22:30
That returns just a blank div.. nothing inside it.. the URL is missing as well — MuhuPower, Mar 04 '22 at 22:35
Can you provide your current code? Or a modified version that can run in a snippet so we can see the same results you're seeing? — StriplingWarrior, Mar 04 '22 at 22:41

Zak · Accepted Answer · 2022-03-04T22:52:37.120

Run this snippet .. The code in my comment works .. We loop through .each class of hello ... Then we assign the element object to item inside the loop. We grab the html of item (which contains the image path). We then rebuild the html inside the class hello with <img src ="">

$('.hello').each((index, item) => {  
    var img = $(item).html(); 
    $(item).html('<img class="hello_img" src="' + img + '">'); 
});

.hello_img{
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hello">
https://files.porsche.com/filestore/image/multimedia/none/911-tu-modelimage-sideshot/model/fe21bac9-833c-11eb-80d3-005056bbdc38/porsche-model.png
</div>
<div class="hello">
https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Porsche_Panamera_4_E-Hybrid_%28MSP17%29.jpg/1200px-Porsche_Panamera_4_E-Hybrid_%28MSP17%29.jpg
</div>

score 1 · Answer 2 · answered Mar 04 '22 at 22:58

This ended up being very similar to Zak's code, but it uses jQuery's functions to manipulate the DOM rather than deconstructing and reconstructing HTML directly. This can prevent bugs that might arise when the div's contents include double-quotes, for example.

$('.hello').each((i, item) => {
  const $item = $(item);
  var url = $item.text();
  $item.empty();
  $item.append($('<img></img>').attr('src', url));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hello">https://upload.wikimedia.org/wikipedia/commons/8/8d/Frog_on_palm_frond.jpg</div>

I think you can omit `$item.empty()` and just change `$item.append(...)` to `$item.html($('').attr('src', url));`. — kmoser, Mar 04 '22 at 23:33

How to convert a url string to have tag after it so it shows the image?

Thanks

2 Answers2