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.
4 answers
solution1
1 ACCPTED 2019-11-12 07:35:19
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.
solution2
1 2019-11-12 07:43:08
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>
solution3
1 2019-11-12 07:47:40
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/>
solution4
1 2019-11-12 07:50:31
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.