Inserting HTML using JavaScript

Question

Ok, I read this thread to figure out how to generate HTML with JavaScript. I attempted doing it with the following script:

<script type='text/javascript'>
function generate_page() {
    var x = 0;
    var y = 0;
    var lines = 20;
    var output;
    while (x < lines) {
        while( y < lines*2){
            output = ("<div id='x" + x + "_" + y + "'>x</span>");
            $('board').prepend(output);
            y++;
        }
        y = 0;
        x++;
        $('board').append('<br />');
    }
}
</script>

</head>
<input type='button' value='test' onClick='generate_page()'>
<body>
<div id='board'>

</div>

</body>
</html>

It doesn't return any errors but just simply doesn't do anything. What am I doing wrong?

a) you're using jQuery syntax so are you including jQuery and b) why is your input outside the body tag? — j08691, Jun 14 '12 at 02:43
The title of this post should be "Writing HTML with JavaScript"... — lkaradashkov, Jun 14 '12 at 02:47
@GerardSexton Because the title **used to be** "Inserting JavaScript in HTML". Now, I see that it has been modified to "Inserting HTML using JavaScript" which makes *total* sense (and is along the lines of what I had proposed). — lkaradashkov, Jun 14 '12 at 14:26

broesch · Accepted Answer · 2012-06-14T02:53:15.837

4

You are missing the # sign for the ids, try this:

<script type='text/javascript'>
function generate_page() {
    var x = 0;
    var y = 0;
    var lines = 20;
    var output;
    while (x < lines) {
        while( y < lines*2){
            output = ("<span id='x" + x + "_" + y + "'>x</span>");
            $('#board').prepend(output);
            y++;
        }
        y = 0;
        x++;
        $('#board').append('<br />');
    }
}
</script>

</head>

<body>
<input type='button' value='test' onClick='generate_page()'>
<div id='board'>

</div>

</body>
</html>

also move the button to the body.

edited Jun 14 '12 at 02:53

answered Jun 14 '12 at 02:43

broesch

2,442
1
19
9

`` is not required in HTML5, and is not valid in HTML4. – Derek 朕會功夫 Jun 14 '12 at 02:49

score 1 · Answer 2 · answered Jun 14 '12 at 02:43

1

You're opening a DIV tag and closing a SPAN tag in your JavaScript.

answered Jun 14 '12 at 02:43

lkaradashkov

8,609
1
15
12

The problem is he forgot an hash `#`. – Derek 朕會功夫 Jun 14 '12 at 02:45
1

Thanks Derek, that was it. :) – Jack Davis Jun 14 '12 at 02:49

score 1 · Answer 3 · answered Jun 14 '12 at 02:43

1

You are opening a div and closing it with a span, also, you never close the div, and never actually open the span. By the way, utilizing document.createElement("div") is a clean way to do this.

answered Jun 14 '12 at 02:43

Ryan

2,755
16
30

I don't think that's the problem since the browser will auto-correct it. – Derek 朕會功夫 Jun 14 '12 at 02:44
1

The browser will close it for you and ignore ``. But it doesn't work very well all the time. – Derek 朕會功夫 Jun 14 '12 at 02:46
Oh yeah: `document.createElement("div")` ==> `$("
")`
– Derek 朕會功夫 Jun 14 '12 at 02:47
lol im old school... i dunno how many times i start typing new XmlHttpRequest(); :P – Ryan Jun 14 '12 at 02:55

score 1 · Answer 4 · answered Jun 14 '12 at 02:48

you're using jQuery syntax so you should includ jQuery

like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
    function generate_page() {
        var x = 0;
        var y = 0;
        var lines = 20;
        var output;
        while (x < lines) {
            while (y < lines * 2) {
                output = ("<div id='x" + x + "_" + y + "'>x</span>");
                $('#board').prepend(output);
                y++;
            }
            y = 0;
            x++;
            $('#board').append('<br />');
        }
    } 
</script></head><body>
<input type='button' value='test' onclick='generate_page()'>
<div id='board'>
</div></body></html>

He did tag it with jquery and he hasnt posted the tags to he could have it above. — Gerard Sexton, Jun 14 '12 at 02:50

Inserting HTML using JavaScript

4 Answers4