html-javascript append non effective

Question

I have this javascript to add image on my html page,here:

<script>
    var img = new Image();
    let filename = 'IMG20191106172456.jpg'
    img.src = "img/" + filename;
    $("row first").append("<li><img src='" + "img/" + filename + "'></li>");
    console.log(img.src);
</script>

Full html

But the problem is it doesn't render anything, here is the live site

First three images being rendered is from here. It is even bring change to my html.

My target is to render the first image again at last.

Nikolaj Dam Larsen · Accepted Answer · 2019-11-12 07:57:45Z

1

You jquery selector targets the element <row> followed by the element <first>. I assume, from the full html, that this isn't what you want. You want to target the classes instead, so if you change your code to

$(".row.first").append(..)

it should work.

Also, notice that I removed the space between the two class names. This is needed since they're both applied to the same html element, whereas the space in the selector indicates that the next class should be on a child element.

You also need to wrap your code in

$(function(){ 
   /* Your code goes here. */ 
});

in order to ensure the HTML is rendered before your javascript is executed.

edited Nov 12, 2019 at 7:57

answered Nov 12, 2019 at 7:35

Nikolaj Dam Larsen

5,7146 gold badges37 silver badges46 bronze badges

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

2 Comments

Maifee Ul Asad Over a year ago

not working, as you can see here

Nikolaj Dam Larsen Over a year ago

Try wrapping the code in $(function(){ /* Your code goes here. */ });. This could be because the javascript is executed before the HTML is rendered.

Patrick · Accepted Answer · 2019-11-12 07:47:24Z

1

The problem is the query selector:

Try this:

for(x=0;x<3;x++) {
      let filename = 'IMG20191106172456.jpg'
      src = "img/" + filename;
      $(".row.first").append("<li><img src='" + "img/" + filename + "' style='width: 150px;'></li>");
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" style="text-align:center; border-bottom:1px dashed #ccc;  padding:30px 0 20px 0; margin-bottom:40px;">
            <div class="col-lg-12">
                <h3 style="font-family:'Bree Serif', arial; font-weight:bold; font-size:30px;">
                    <a style="text-decoration:none; color:#666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Gallery</a>
                </h3>
            </div>
        </div>
        <ul class="row first">
           <li>
                <img alt="Rocking the night away" style="width: 150px;height:150px;" src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg">
                <p>Consectetur adipiscing elit</p>
            </li>
            <li>
                <img alt="Rocking the night away" style="width: 150px;height:150px;" src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg">
                <p>Consectetur adipiscing elit</p>
            </li>
        </ul>

edited Nov 12, 2019 at 7:47

answered Nov 12, 2019 at 7:43

Patrick

8212 gold badges7 silver badges26 bronze badges

2 Comments

Maifee Ul Asad Over a year ago

you just ignored row class.. that's important here

Patrick Over a year ago

Then just add row, doesnt change the outcome.. See updated

Leepyng Chen · Accepted Answer · 2019-11-12 07:47:40Z

1

I think that it can't work maybe because that your document have not loaded already;

You can remove your code to the end of the body label like:

<body>
    <div>html</div>
    <script>
        javescript code write here
    </script>
<body/>

answered Nov 12, 2019 at 7:47

Leepyng Chen

274 bronze badges

Comments

Amado · Accepted Answer · 2019-11-12 07:50:31Z

1

add raedy to load the img when page loaded or under any other event and you pass the file name on img src you should pass the whole src ('img/filename')

 $(document).ready(function(){
        let filename = 'IMG20191106172456.jpg'
        src = "img/" + filename;
        img.src = "img/" + filename;
        $(".row.first").append("<li><img src='" + src+ "'></li>");
        console.log(img.src);
    });

answered Nov 12, 2019 at 7:50

Amado

3832 silver badges16 bronze badges

Collectives™ on Stack Overflow

html-javascript append non effective

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related