Appending HTML code to a div using JS - without double quotes

user2822127 Published at Dev

user2822127

I need to grab each photo from a directory, wrap it in some s and add the whole thing to a container div.

The issue is that in the browser each line shows up inside a set of double quotes.

Here a minimal version of my JS

<script>
var folder = "gallery-all/";
var photosRow = document.getElementById("photo-row");

var prefix = "<img src='";
var postfix = "'>";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                photosRow.append(prefix + folder + val + postfix);
            } 
        });
    }
});
</script>

This is what shows is the browser:

<img src='gallery-all/img1.jpg'>
<img src='gallery-all/img2.jpg'>
<img src='gallery-all/img3.jpg'>
<img src='gallery-all/img4.jpg'>

and upon inspecting the page the code is:

"<img src='gallery-all/img1.jpg'>"
"<img src='gallery-all/img2.jpg'>"
"<img src='gallery-all/img3.jpg'>"
"<img src='gallery-all/img4.jpg'>"

I have tried various methods of escaping, storing different parts as variables, etc. Regardless of what I do, the double quotes always show up.

mwilson

You're only appending the string. You need actually append an element instead.

<script>
var folder = "gallery-all/";
var photosRow = document.getElementById("photo-row");

var prefix = "<img src='";
var postfix = "'>";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) {
                const img = $('<img />', { src: folder + val });
                photosRow.append(img);
            } 
        });
    }
});
</script>

Collected from the Internet

Please contact [email protected] to delete if infringement.