Best Way To Build Client Side HTML

HTML & CSS
1

Hello everyone and thanks for your help in advance. I am relatively new to building HTML on the client side. I have been building client side HTML by building strings and appending the element (currently using jQuery after an ajax call). This seems to be an extremely crude method of creating HTML elements, but I haven’t come across a cleaner way of doing this. Any insight would be helpful.

2

A text editor?

3 Likes
3

I don’t think I really understand the question.

My take is that instead of the server sending XML / JSON to the browser and having JavaScript in the browser render the computed DOM using that, that there might be a better way.

The only thing I can think of is if the server sent compiled code and the browser used that.

AFAIK nothing like that has ever been explored let alone implemented. (except maybe apps?)

1 Like
4

Let me see if I can clarify. In the example of building a table, you would do something like:

var tbl = '<table>'
tbl = tbl + <tr>'

etc… Or for a hyperlink:

var link = '<a href= '#'>
link = link + 'Link Text'

etc. So, I was wondering if there was some way to create these elements without a purely manual string building. I know for example there a javascript tables that can be bound to JSON, but I was wondering if any of the frameworks had the equivalent of server sides controls like in ASP.Net or something like that. Building the elements manually seems very error prone and inefficient.

5

I’m not really sure how they work, but have you investigated some of the front-end frameworks such as AngularJS and Aurelia?

6

Not in JavaScript you wouldn’t.

In JavaScript to create an HTML table you’d do something like this:

(function() {
var tabl, row, i, j;
tabl = document.createElement('table');
tabl.createTHead();
row = tabl.tHead.insertRow(-1);
row.insertCell(0); row.cells[0].innerHTML = ' ';
for (i=1; i < 13; i++) {row.insertCell(i); row.cells[i].innerHTML = i;}
tabl.appendChild(document.createElement('tbody'));
for (j=1; j < 13; j++) {
   row = tabl.tBodies[0].insertRow(-1);
   row.insertCell(0); row.cells[0].innerHTML = j; 
   row.cells[0].className = 'first';
   for (i=1; i < 13; i++) {row.insertCell(i); row.cells[i].innerHTML = i*j;}
}
document.getElementById('mult').appendChild(tabl);
}());

Just the number of rows and cells and the values to assign to the innerHTML for the content of each cell would change.

7

Thanks for the response. What if you needed to set different css classes to table columns? How about adding elements to each table cell?

8

You would use the <colgroup> and <col> elements at the start of the table to do that.

9

OK. I’m starting to get the idea. Isa this code pretty bulletproof between different browsers? What about creating an element such as a hyperlink?

10

Can you clarify what your development environment and development stack is? Why are you having to generate HTML, can’t you just write it in a file or something??

1 Like
11

I’m using ASP.Net WebApi2 and SignalR. So the dynamic data is JSON being sent via ajax calls. Previously, as an ASP.Net developer, I used server side controls to create the HTML. Now, that paradigm is outdated. I know I could use something like the RAZOR engine to generate the HTML server side and call it via ajax, but that seems to be a dinosaur that will soon become extinct as well. I have been charged with rebuilding a database intensive site, so my thinking is most state of the art websites being designed today work with JSON or some other type of Restful data, highly disconnected from the page architecture. So please tell me if I am barking up the wrong tree.

Thanks for everyone’s help.

13

I’m not at all fimiliar with ASP.net, so I may not be able to fully comprehend the problem; but maybe a JS templating engine such as Handlebars.js might make for a cleaner separation of concerns? You’d basically load – via AJAX, if you like/have to – some HTML content where all required templates are defined like

<script type="text/template" id="helloworld">
    <h1>Hello {{world}}!</h1>
</script>

which you’d then access as an Element (by ID or something) and render to the DOM with the .compile() method (say).

Edit: Or, if you don’t actually want to compile JS expressions to HTML, just .load() some arbitrary HTML content into an Element using old jQuery.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.