CODEWITHSUNDEEP
javascriptjqueryinnerhtml
theJava
theJava

Reputation: 15034

innerHTML not working in any browser

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
</head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    (function(){
        var html = '<p>';
            html += 'Hello World';
            html += '</p>';

        $(document.body).innerHTML = html;  
        //document.body.innerHTML = html;
    })
</script>
<body>
</body>
</html>

$(document.body).innerHTML = html; // jQuery one is not working either. document.body.innerHTML = html; // normal JS trying to query DOM is not working either.

What's the actually issue here?. I know while using jQuery we don't need to use innerHTML to append the HTML thing, just was trying and learning it out.

Upvotes: -1

Views: 522

Answers (10)

David Goss
David Goss

Reputation: 707

That self-executing function isn't quite right, you need to change the last line to:

})();

But even once you fix that, because the script is before the opening body tag, it's running before the body has been constructed in the DOM. If you watch the console, you'll see an exception like "Cannot set property 'innerHTML' of null". Moving the script into the body will fix this.

So here's the native JS version:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
</head>
<body>
    <script>
        (function(){
            var html = '<p>';
                html += 'Hello World';
                html += '</p>';
            document.body.innerHTML = html;
        })();
    </script>
</body>
</html>

And then here is a jQuery version:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
</head>
<body>
            <script src="jquery.js"></script>
    <script>
        (function(){
            var html = '<p>';
                html += 'Hello World';
                html += '</p>';
            $('body').html(html);
        })();
    </script>
</body>
</html>

Upvotes: 0

Moazzam Khan
Moazzam Khan

Reputation: 3170

change $(document.body).innerHTML = html; to $(document.body).html(html); which is a right way to do it using jQuery.

or

change $(document.body).innerHTML = html; to $(document.body)[0].innerHTML = html; if you dont want to use html() method.

Upvotes: 1

Manu M
Manu M

Reputation: 1064

Do like this

<script>
   $(document).ready(function(){
     var html = '<p>';
        html += 'Hello World';
        html += '</p>';

     $('body').html(html);  
    })
</script>

Upvotes: 1

udidu
udidu

Reputation: 8588

You forgot one thing:

(function(){
});

This will not run, you should do:

$(function() {       
   //...
   //and then...
   $('body').html(html);
});

When you're using jQuery to select an element, jQuery adds an array wrapper for it so if you want to use both the jquery selector and the native JavaScript html you should do it like:

$(document.body)[0].innerHTML = html;

Upvotes: 1

Arda
Arda

Reputation: 6926

Since you are using jQuery, you can also do this the jQuery way:

$(function(){
    var html = '<p>';
            html += 'Hello World';
            html += '</p>';

        $('body').html(html);  

});

JSFiddle

Upvotes: 1

Lookis
Lookis

Reputation: 75

actually the browser run your script before loaded. you have to setup a timer or add onDomReady event

Upvotes: 1

Alvaro
Alvaro

Reputation: 41605

Use the $.html() function of jQuery :

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

var html = '<p>';
html += 'Hello World';
html += '</p>';

$(document.body).html(html);

Living example: http://jsfiddle.net/YTaRG/

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

As simple as you can do with html() is

  $('body').html(html);

Working demo

Upvotes: 2

Rituraj ratan
Rituraj ratan

Reputation: 10378

 (function(){
        var html = '<p>';
            html += 'Hello World';
            html += '</p>';

        $("body").html(html);  
        //document.body.innerHTML = html;
    })

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

you need to get the dom element, $(document.body) returns a jQuery wrapped element which does not have innerHTML property

$(document.body).get(0).innerHTML = html;

or simple

document.body.innerHTML = html;

using jQuery

$('body').html(html)

also it looks like the anonymous function is not called

(function(){
    var html = '<p>';
    html += 'Hello World';
    html += '</p>';

    document.body.innerHTML = html;
})()

if you need to wait for dom ready then

jQuery(function($){
    var html = '<p>';
    html += 'Hello World';
    html += '</p>';

    $('body').html(html)
})

Upvotes: 6

Related Questions