Manipulating DOM with (framework-less) javascript - Stack Overflow

Ok, I haven't been using JavaScript without JQuery for quite some time now... But, as coding goes,

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?

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?

Share Improve this question asked Oct 7, 2011 at 17:12 DänuDänu 5,9699 gold badges45 silver badges59 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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.

<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

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745146585a4613675.html

相关推荐

  • Manipulating DOM with (framework-less) javascript - Stack Overflow

    Ok, I haven't been using JavaScript without JQuery for quite some time now... But, as coding goes,

    1小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信