Manipulating DOM with (framework-less) javascript

Question

Ok, I haven't been using JavaScript without JQuery for quite some time now... But, as coding goes, I have to do without it's power for a project where I can't be sure that JQuery is provided.

The thing I'm trying to do would be the following using JQuery:

$(document).ready(function() {
    $('#myDiv').append('<ul><li>a</li><li>b</li></ul>');
});

Now to the non-jquery thing, this is what I have and I really can't understand why it isn't working:

<html>
    <head>
        <script type="text/javascript">
            function load() {
                var s = '<ul><li>a</li><li>b</li></ul>'; 
                var element = document.getElementById("myDiv");
                element.innerHtml += s;
            }
        </script>
    </head>
    <body onload="load()">
        <div id="myDiv"></div>
    </body>
</html>

Thing is, nothing happens (the function gets called though). Could it be that the DOM isn't ready when load() is called?. I vaguely remember this code working in the firefox 2.x IE7 era ...

What would be the (a) right solution?

James Allardice · Accepted Answer · 2011-10-07 17:16:17Z

10

It's innerHTML not innerHtml. Notice the upper case HTML. Change that and it should work fine! Here's a working example.

By using innerHtml you are simply creating a new property on the element object and giving it the value of s.

answered Oct 7, 2011 at 17:16

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dänu Over a year ago

Oh ****, I totally missed that one, thank you! Need. More. coffee. :-)

James Allardice Over a year ago

No problem :) Always helps to get a few extra pairs of eyes to look over something! Glad I could help.

Itay Moav -Malimovka · Accepted Answer · 2011-10-07 17:16:55Z

2

<html>
    <head>
        <script type="text/javascript">
            function load() {
                var s = '<ul><li>a</li><li>b</li></ul>';
                var element = document.getElementById("myDiv");
                element.innerHTML += s;
            }
        </script>
    </head>
    <body onload="load()">
        <div id="myDiv"></div>
    </body>
</html>

JS is case sensitive

answered Oct 7, 2011 at 17:16

Itay Moav -Malimovka

53.8k68 gold badges198 silver badges292 bronze badges

Comments

Matt Montag · Accepted Answer · 2011-10-07 17:18:29Z

0

I think you want element.innerHTML += s;.

answered Oct 7, 2011 at 17:18

Matt Montag

7,6098 gold badges44 silver badges47 bronze badges

Collectives™ on Stack Overflow

Manipulating DOM with (framework-less) javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related