html-javascript append 無效

Question

我有這個 javascript 在我的 html 頁面上添加圖像，這里：

<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>

全html

但問題是它沒有渲染任何東西，這里是現場

正在渲染的前三個圖像來自這里。 它甚至給我的 html 帶來了變化。

我的目標是最后再次渲染第一張圖像。

Answer 1

您的 jquery 選擇器以元素<row>后跟元素<first>為目標。 我假設，從完整的 html 來看，這不是你想要的。 您想改為以類為目標，因此如果您將代碼更改為

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

它應該工作。

另外，請注意我刪除了兩個 class 名稱之間的空格。 這是必需的，因為它們都應用於相同的 html 元素，而選擇器中的空格表示下一個 class 應該位於子元素上。

您還需要將代碼包裝在

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

為了確保在執行 javascript 之前呈現 HTML。

Answer 2

問題是查詢選擇器：

嘗試這個：

 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>

Answer 3

我認為它無法工作，可能是因為您的文檔尚未加載；

您可以將代碼刪除到正文 label 的末尾，例如：

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

Answer 4

在頁面加載或任何其他事件下添加 raedy 以加載 img，並且您在 img src 上傳遞文件名，您應該傳遞整個 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);
    });

html-javascript append 無效

問題描述

4 個解決方案

解決方案1
1 已采納 2019-11-12 07:35:19

解決方案2
1 2019-11-12 07:43:08

解決方案3
1 2019-11-12 07:47:40

解決方案4
1 2019-11-12 07:50:31

html-javascript append 無效

問題描述

4 個解決方案

解決方案1 1 已采納 2019-11-12 07:35:19

解決方案2 1 2019-11-12 07:43:08

解決方案3 1 2019-11-12 07:47:40

解決方案4 1 2019-11-12 07:50:31

解決方案1
1 已采納 2019-11-12 07:35:19

解決方案2
1 2019-11-12 07:43:08

解決方案3
1 2019-11-12 07:47:40

解決方案4
1 2019-11-12 07:50:31