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

user_2822127 0
Viewed 480

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.

html jquery javascript
3 Answers

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>

user_24158020

Turns out that the issue is 

photosRow.append

If i replace this with

$('#photo-row')

then it works!

<script>
var folder = "gallery-all/";

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)$/) ) { 
                $('#photo-row').append(prefix + folder + val + postfix);
            } 
        });
    }
});
</script>

I do not have any idea why, though.

user_28221270

try to use the $() method to create an element from the text then append the element not the text as an example to create an image element and append it to container 

container = $('#container');
imgEl = $('<img/>');
container.append(imgEl);

so your code will be 

$.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));
            } 
        });
    }
});

update 

var photosRow = document.getElementById("photo-row");

get you pure javascript object, not Jquery object, and append what you were using is this https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append it needs an HTML element.

but when you used $('#photo-row') it returns Jquery object and append method now the jquery method which builds element from text https://www.w3schools.com/jquery/html_append.asp

don't mix between pure javascript and Jquery when you user Jquery stick to it

user_16732270
Related