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
– j08691, Commented Jun 14, 2012 at 2:43
The title of this post should be "Writing HTML with JavaScript"... — lkaradashkov
– lkaradashkov, Commented Jun 14, 2012 at 2: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
– lkaradashkov, Commented Jun 14, 2012 at 14:26

broesch · Accepted Answer · 2012-06-14 02:53:15Z

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, 2012 at 2:53

answered Jun 14, 2012 at 2:43

broesch

2,4581 gold badge20 silver badges10 bronze badges

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

1 Comment

Derek 朕會功夫 Over a year ago

<input /> is not required in HTML5, and is not valid in HTML4.

lkaradashkov · Accepted Answer · 2012-06-14 02:43:12Z

1

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

answered Jun 14, 2012 at 2:43

lkaradashkov

8,9191 gold badge17 silver badges12 bronze badges

2 Comments

Derek 朕會功夫 Over a year ago

The problem is he forgot an hash #.

Jack Davis Over a year ago

Thanks Derek, that was it. :)

Ryan · Accepted Answer · 2012-06-14 02:43:55Z

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, 2012 at 2:43

Ryan

2,82518 silver badges30 bronze badges

4 Comments

Derek 朕會功夫 Over a year ago

I don't think that's the problem since the browser will auto-correct it.

Derek 朕會功夫 Over a year ago

The browser will close it for you and ignore </span>. But it doesn't work very well all the time.

Derek 朕會功夫 Over a year ago

Oh yeah: document.createElement("div") ==> $("<div>")

Ryan Over a year ago

lol im old school... i dunno how many times i start typing new XmlHttpRequest(); :P

Laughing · Accepted Answer · 2012-06-14 02:48:45Z

1

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>

answered Jun 14, 2012 at 2:48

Laughing

2112 silver badges9 bronze badges

1 Comment

Gerard Sexton Over a year ago

He did tag it with jquery and he hasnt posted the <html><head> tags to he could have it above.

Collectives™ on Stack Overflow

Inserting HTML using JavaScript

4 Answers 4

1 Comment

2 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related