Can this big block of code be avoided in javascript?

Question

Haven't worked much on front-end and was wondering if what I did is correct.
I have created an html table that displays data.
I have added button and check-boxes to modify structurally the table i.e. add a row.
The code to do that is a big block of code that does something like:

var table = document.getElementById('table');  
table.insertRow(1);  

var id_td = document.createElement('td');  
//create options element  
id_td.appendChild(options);  

var name_td  = document.createElement('td');  
//create input textbox  
name_td.appendChild(txt_box);   

etc etc

So I don't like the fact that it is a really big-block of essentially repeating code that creates the elements.
I wanted to know, am I on the right track? Is this the only way unless we use some library like JQuery?

innerhtml could be easier. you could also create a small function... — cegfault, Jun 03 '13 at 20:34
The DOM API is verbose. Really verbose. You may wrap some operations into less verbose functions, but if you plan to make extensive use of jQuery, then by all means use it, as it's designed to boil away the DOM's verbosity. If you don't have many operations to perform, jQuery's overhead is often not justified. — Michael Berkowski, Jun 03 '13 at 20:35
"Is this the only way unless we use some library like JQuery": well, no. You could always make your own jQuery-like functions. — Dave, Jun 03 '13 at 20:35
That's not really that much code... though if you're creating a *lot* of HTML objects, you might find that creating one outside your loop and cloning it inside is a little faster than creating a new one with each iteration. Optionally, you may want to clone an entire set of elements that are already part of your source (assuming there are any). — cimmanon, Jun 03 '13 at 21:10

score 1 · Answer 1 · answered Jun 03 '13 at 20:39

1

The VanillaJS approach

You can use something like

var table = document.getElementById('table');  
table.innerHTML = "<tr><td id="+id+"></td><td class="name"></tr>";

To add your markup as a string, which might end up being more clear. Tough to tell exactly without seeing exactly how you're repeating yourself, but you might be able to abstract this out into a function

Libraries

There are plenty of libraries though that abstract away this ugliness though. jQuery is one, but something like knockoutjs might be a better fit for you.

It allows you to define a data model and bind html templates to that data model with automatic updating. So you could then just define your data as a JSON object and have it reflected in the DOM, with future updates just touching the view-model object and not having to deal with the DOM functions at all.

answered Jun 03 '13 at 20:39

Ben McCormick

25,260
12
52
71

Well e.g. I create a td, create a `select` and add `options`. Append to `td` and append to `tr`. I create a `td`, create an `input` text, append to `td` append to `tr`. I create a `td` create a `select` and add `options`. Append to `td` and append to `tr` etc – Cratylus Jun 03 '13 at 20:41
Quick note, since OP mentioned that they want a solution compatible with IE7—you can use `innerHTML` and still have it be compatible with IE7 if you're making the entire table with the HTML string. http://stackoverflow.com/a/12613695/2430028 – user2000008 Jun 03 '13 at 20:44
1

That sounds like its begging for some templating then, or at least some helper functions. If you want to keep it minimalist, I'd just create helper functions for creating a td and a select. If you want to maintain and grow this project, I'd recommend you look into knockout or jQuery. For this particular scenario I think Knockout is what you want. – Ben McCormick Jun 03 '13 at 20:46
@user2000008 Pretty sure the OP didn't say anything about IE7 :) Oh i see, in response to that comment. If IE7 support is an issue then yes there are workarounds. But it would be good to focus on getting the general case covered and then worry about workarounds. Knockout/jQuery work back to IE6 if he goes that route. – Ben McCormick Jun 03 '13 at 20:47

score 1 · Answer 2 · answered Jun 03 '13 at 20:51

I don't like the fact that it is a really big-block of essentially repeating code that creates the elements

Why not make aliases for the long-winded function names?

var gid = function (id) {return document.getElementById(id);}, // so short!
    ce = function (e) {return document.createElement(e)}, // ce(tag) is easy!
    td = function () {return ce('td');}, // td() now makes a new `<td>`
    ap = function (p, c) {return p.appendChild(c), p;}; // return more useful

now that "big-block" is

var table = gid('table'),
    row = table.insertRow(1);

var id_td = td(), options = ce('select');
ap(id_td, options);

var name_td  = td(), txt_box = ce('textarea');
ap(name_td, txt_box);

// etc etc

Can this big block of code be avoided in javascript?

2 Answers2

The VanillaJS approach

Libraries