卡住試圖讓JS傳播HTML格式的圖像

我試過了一些查看替代方案的人問過類似的問題。下面是HTML：卡住試圖讓JS傳播HTML格式的圖像

<div class="col-md-6" style="height:480px;border:1px solid #fff"> 
    <div id="view-port"> 

    </div> 
</div>

，這裏是我已經根據來自StackOverflow的其他答案嘗試的JavaScript：

$(document).ready(function() { 
    document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />"; 

});

或

$(document).ready(function() { 
     var elem = new Image(); 
     elem.src = "https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg"; 
     document.getElementById("view-port").appendChild(elem); 
});

均未似乎是爲我工作。該div只是保持不變。如果我直接在HTML中的div內部注入圖像標籤，它可以工作;那當然不是我想要達到的目標。我對JS非常陌生，所以如果最終在我的方法或代碼中出現一個微不足道的錯誤，任何道歉。

編輯：我意識到我正在做一些不同於我的代碼揭示的東西;同時使用jQuery和JS，當我真正意義上做JS的時候。對不起，就像我說的，我很新。我把這些代碼從我發現的其他東西中提取出來。什麼是實施這個的正確方法？

FINAL EDIT：我犯了一些極其新手的錯誤，其中一個在我引用JS文件時沒有注意相對路徑。感謝大家的所有答案;我從每一箇中學到了一些東西。再一次，非常感謝你們！

來源

2016-02-23 8protons

第一個對我來說工作正常https://jsfiddle.net/j08691/mz8d2rkh/。你如何運行你的JavaScript？你在控制檯中遇到什麼錯誤？編輯：兩者都適合我。 – j08691

在您準備好文檔之前這是否正在運行？嘗試在onload函數中執行此操作？ – tenor528

'$（document）.ready'是jQuery的一部分。你說你正在使用JavaScript。如果你不包含jQuery，你的代碼將在DOM準備好之前運行（頁面被加載）。或者，您可以使用'window.onload'來代替，直接使用javascript。 – Tricky12

你的代碼是好的，但問題是，當應的JavaScript執行你沒有指定。如果你想在頁面加載時只需添加到您的這頭要執行你的JavaScript：

<script> 
    window.onload = function() { 
     document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />"; 
    }; 
</script>

在這裏看到：https://jsfiddle.net/9uv9Lgan/4/

...或者，如果你想在鼠標懸停執行JavaScript，因此的onclick等 - 的最好的事情是添加腳本到像這樣的功能：

<script> 
    myFunction(){ 
     document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />"; 
    } 
</script>

和執行功能：

<div id="view-port"></div> 
<a href="#" onclick="myFunction()">Click me to show the image</a>

看這裏：https://jsfiddle.net/9uv9Lgan/13/

注意：這兩個腳本應在<head>部分。

來源

2016-02-23 18:38:22

我無法在實際項目中獲得此功能：/我嘗試了您的代碼並獲取了裝飾文本，但是當我點擊它時，沒有圖像出現。 – 8protons

你有腳本嗎？ –

我知道我做過，但我再次檢查。我正在採購該文件，但不是路徑...呃，非常感謝你！ – 8protons

確保你正在做的這三件事情至少是1，你的代碼（如在註釋中規定）將正常工作：

1）使用jQuery $(function(){ document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />"; });

或

2）使用本地JavaScript和在window.onload或添加事件偵聽window.onload = function(){ document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />" };

或

3）P在源文件中的內容之後加上這個document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />";。意思是在關閉</body>標籤之前放置您的內容，然後放置您的javascript。

所有這些方法都爲DOM提供了在腳本解析之前加載的機會。

如果你留在文檔的<head>你的JavaScript沒有某種形式的document.ready聽衆的描述，你不會看到繪製到屏幕上的圖像，我會建議的1和3

混合

http://codepen.io/nicholasabrams/pen/NxQgay

來源

2016-02-23 17:37:39

如αG33k提到 - 你的代碼可能運行HTML文檔有機會在這裏加載之前與jQuery的完整的解決方案：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

</head> 

<body> 

    <div class="col-md-6" style="height:480px;border:1px solid #fff"> 
     <div id="view-port"> 

     </div> 
    </div> 
    <!-- loading jQuery from CDN --> 
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ //makes sure your code runs when your document is ready 

      //creates the img node with jquery 
      var $image = $('<img src="https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg" />') 

      //appends img node to your view-port 
      $('#view-port').append($image); 

     }) 

    </script> 
</body> 
</html>

這裏，它是在不使用的jQuery：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

</head> 

<body> 

    <div class="col-md-6" style="height:480px;border:1px solid #fff"> 
     <div id="view-port"> 

     </div> 
    </div> 

    <script type="text/javascript"> 

     // runs your code after the document is ready (identical to jQuery: $() and $(document).ready()) 
     function onReady(callback){ 
      if(typeof callback === 'function'){ 

       // Sane browsers 
       if (document.addEventListener) { 
        document.addEventListener("DOMContentLoaded", function(){ 
         document.removeEventListener("DOMContentLoaded", arguments.callee, false); 
         callback(); 
       }, false); 

       // IE (if you don't care for IE older than 9 you can skip this) 
       } else if (document.attachEvent) { 
        document.attachEvent("onreadystatechange", function(){ 
         if (document.readyState === "complete") { 
          document.detachEvent("onreadystatechange", arguments.callee); 
          callback(); 
         } 
        }); 
       } 
      } 
     } 

     //your code here: 
     onReady(function(){ 

      var image = '<img src="https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg"></image>'; 
      var viewPort = document.getElementById('view-port'); 

      console.log(viewPort) 
      viewPort.innerHTML = image; 
     }) 

    </script> 
</body> 
</html>

我從接過domready中功能：How can I detect DOM ready and add a class without jQuery?（用戶CMS）

心靈你domready中（）以及jQuery的準備（）是相當差異erent from window.onload。參見：What is the non-jQuery equivalent of '$(document).ready()'?

來源

2016-02-23 19:07:21

卡住試圖讓JS傳播HTML格式的圖像

回答

相關問題