What can I use in place of document.write in a function to procedurally generate html?

Question

So thanks to stack overflow, I've determined that document.write is clobbering my webpage/program every time it runs. I often see the answer is to use innerhtml and document.getElementById, however, in the following case, I can't wrap my head around how it would be used below, seeing as how you have to assign an id for it to replace. I want the whole thing below to redraw in a single div. All it does is take that array, spit it out vertically, and highlight the number that matches the variable "speed". That variable will change when you rerun the speedcounter function, so that the number that is highlighted will also change.

Is there a better way to do this?

And thanks for looking.

function speedcounter() {

var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.write('   <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');   

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
      document.write('<font color=#00FF00>');
     }
    document.write(sp[spx]); 
    document.write('<font color=#000000><br />');
    }
 document.write ('<input type="button" onclick="remspeed();" value="-">');    
 }

Just a side note, the `` tag has been deprecated for quite some time. Use CSS instead. — j08691, Jun 12 '12 at 21:25
I'm not sure how to dynamically change the font color based on the current state of $spx, is that possible with CSS? The idea was to have it happen as a result of the for loop. — Johnny H., Jun 12 '12 at 21:31

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

Anything stopping you from using jquery?

Following link uses jquery to create/append dom elements. How to create a DOM node as an object?

edited May 23 '17 at 12:32

Community

1
1

answered Jun 12 '12 at 21:26

Kenneth Ito

5,201
2
25
44

Thanks for the reply and the link as well. I know nothing about jquery, so I'll have to try it sometime soon. I'm not a professional though, so I was really trying to keep things as simple/vanilla as possible. – Johnny H. Jun 12 '12 at 21:42
1

In my opinion jquery actually makes things more simple. Behind the scenes it will handle a good deal of the javascript/cross browser "gotcha's". It's quite likely you'll end up writing less code, and the code that you do write will be more readable. Just my 2 cents though ;) – Kenneth Ito Jun 12 '12 at 21:50
@KennethIto is absolutely right. Definitely look into learning jQuery. It will make your life a lot easier! – sachleen Jun 12 '12 at 22:08

score 1 · Accepted Answer · answered Jun 12 '12 at 21:34

If you don't want to use jQuery for whatever reason, here's a javascript-only solution.

I created a div

<div id="speed"></div>

and then use document.getElementById() and innerHTML to add HTML to it. I kept your code structure to illustrate how it would be done. I'm using += to add on to the existing HTML in the div. At the top of the function, I clear it. If you don't do that you'll get multiple copies of the output every time you call the function.

function speedcounter() {
document.getElementById('speed').innerHTML = "";
var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.getElementById('speed').innerHTML += '<h2>Speed</h2></br>';
document.getElementById('speed').innerHTML += '<input type="button" onclick="addspeed();" value="+"><br />';

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
        document.getElementById('speed').innerHTML += '<span style="color:#00FF00">' + sp[spx] + '</span><br />';
    } else {
        document.getElementById('speed').innerHTML += sp[spx] + "<br />"; 
    }
 }
 document.getElementById('speed').innerHTML += '<input type="button" onclick="remspeed();" value="-">';    
}

speedcounter();

I also removed your font tag and replaced it with a span and inline CSS to set the color.

Demo

Thanks! This is exactly what I was looking for. I had thought that each time you called innerhtml you were replacing it completely, but I see that you've put a + sign to simply add to it. That's where I was stuck. — Johnny H., Jun 12 '12 at 22:08
Yeah, that's the addition assignment operator. `a = a + b` translates to `a += b`. So in this case, I'm taking the innerHTML and adding something to it, and then setting it back as the innerHTML. Just looks cleaner. — sachleen, Jun 12 '12 at 22:10

score 0 · Answer 3 · answered Jun 12 '12 at 21:33

0

You can modify the innerHTML property of the body directly:

var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<h2>Speed</h2></br>';

http://jsfiddle.net/YB8HU/

Just keep in mind that every time you modify the innerHTML, the browser will reprocess the layout, so consider assigning your HTML strings to a variable, and actually adding it to the body at the end of your script.

answered Jun 12 '12 at 21:33

bfavaretto

71,580
16
111
150

Thanks for your help! What does the [0] indicate here? – Johnny H. Jun 12 '12 at 22:10
It means "the first `body` tag found". Your HTML shouldn't have more than one, but since `getElementsByTagName` returns a `NodeList` (not a single `Node`), you have to use that. – bfavaretto Jun 12 '12 at 22:12

What can I use in place of document.write in a function to procedurally generate html?

3 Answers3