Question

我尝试过那些提出类似问题的人的观点。这是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。对不起，就像我说的，我很新。我把这些代码从我发现的其他东西中扔出来。实现这个的正确方法是什么？

最终编辑：我犯了一些非常新的错误，当我引用JS文件时，其中一个错误没注意相对路径。感谢大家的所有答案;我从每一个中学到了一些东西。再次，非常感谢你们！

Answer 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）将此document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />";放在源中的内容之后。含义将您的内容和您的javascript放在收尾</body>标记之前。

所有这些方法都为DOM提供了在脚本解析之前加载的机会。

我推荐1和3的混合物。

如果您将javascript保留在文档的<head>中而没有某种类型的document.ready listener，那么您将看不到绘制到屏幕上的图像

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

Answer 2

您的代码很好，但问题是您没有指定何时执行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/

...或者如果你想在mouseover，onclick等上执行javascript - 最好的办法是将脚本添加到函数中，如下所示：

<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>部分。

Answer 3

正如Alpha 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>

我从：How can I detect DOM ready and add a class without jQuery?（用户CMS）

获取了domReady函数

请注意，domReady（）以及jQuery ready（）与window.onload完全不同。请参阅：What is the non-jQuery equivalent of '$(document).ready()'?

坚持尝试让JS使用图像

3 个答案: