Stuck on trying to get JS to propagate HTML div with image

Question

I've tried a view alternatives from people who've asked similar questions. Here is the HTML:

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

     </div>
</div>

And here is the JavaScript that I've tried based on other answers from StackOverflow:

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

});

or

$(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);
});

Neither of which seem to be working for me. The div just remains unaltered. If I directly inject the image tag inside the div within the HTML, it works; that's not, of course, what I'm trying to achieve though. I'm very new to JS, so any apologies if it ends up being a trivial mistake in my approach or code.

EDIT: I'm realizing that I'm tyring to do something different than my code reveals; using jQuery and JS at the same time, when I'm really just meaning to do JS. Sorry, like I said, I'm pretty new. I threw that code together from something else I found. What's the correct way to implement this?

FINAL EDIT: I made some extremely rookie mistakes, one of which was not paying attention to the relative path when I referenced the JS file. Thanks to everyone for all of their answers; I learned something from each one. Again, thank you guys so much!

First one works fine for me https://jsfiddle.net/j08691/mz8d2rkh/. How are you running your JavaScript? What errors are you getting in the console? Edit: Both work fine for me. — j08691, Feb 23 '16 at 17:31
Is this running before you document is ready? Try doing this in an onload function? — tenor528, Feb 23 '16 at 17:37
`$(document).ready` is part of jQuery. You say you are using javascript. If you don't include jQuery, your code is going to run before the DOM is ready (page is loaded). Alternatively, you could use `window.onload` instead, to stick with straight javascript. — Tricky12, Feb 23 '16 at 17:53
You approved an edit from an anonymous user that fundamentally changes the question. Are you using jQuery? Is your code wrapped in a document.ready call? — j08691, Feb 23 '16 at 18:11
I actually had made that edit, I don't know why it went as anon. I'm starting to understand now that I totally don't know what I'm doing, and that I'm trying to do jQuery and JS at once lol. — 8protons, Feb 23 '16 at 18:14

score 1 · Answer 1 · edited Feb 28 '16 at 18:05

Make sure you are doing at least 1 of these 3 things and your code (as stated in the comments) will work properly:

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

or

2) Use native Javascript and window.onload or add an event listener window.onload = function(){ document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />" };

or

3) Place this document.getElementById("view-port").innerHTML="<img src='https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg' />"; after the content in the source. Meaning put your content and then your javascript last before the closing </body> tag.

All of these methods give the DOM a chance to load before the script parses it.

I would recommend a mixture of 1 AND 3.

If you leave your javascript in the <head> of the document without some sort of document.ready listener as described you will not see the image drawn to the screen

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

score 1 · Accepted Answer · answered Feb 23 '16 at 18:38

Your code is good but the problem is that you didn't specified when should the javascript be executed. If you want your javascript to be executed when the page loads just add this into your header:

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

See here: https://jsfiddle.net/9uv9Lgan/4/

... or if you want to execute javascript on mouseover, onclick, etc. - the best thing would be add the script into the function like this:

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

and execute the function:

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

See here: https://jsfiddle.net/9uv9Lgan/13/

NOTE: both scripts should be in <head> section.

I can't get this to work in an actual project :/ I tried your code and I get the decorated text but when I click it, no image appears. — 8protons, Feb 23 '16 at 18:44
I knew i did, but I check again anyways. I was sourcing the file, but not the path... Ugh, thank you so much! — 8protons, Feb 23 '16 at 19:14

score 0 · Answer 3 · edited May 23 '17 at 11:45

As Alpha G33k mentions - your code probably runs before the HTML document has a chance to load here's the complete solution with 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>

And here it is without the use of 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>

I took the domReady function from: How can I detect DOM ready and add a class without jQuery? (by user CMS)

Mind you that domReady() as well as the jQuery ready() are quite different from window.onload. See: What is the non-jQuery equivalent of '$(document).ready()'?

Stuck on trying to get JS to propagate HTML div with image

3 Answers3