Dynamic DOM elements creation

Question

I should add rows to the table with jQuery:

    <table class="table">
      <tbody id="dh-values">
      </tbody>
    </table>

I've written the following code:

  function displayHash(fieldName) {
    $('#dh-values').append('<tr></tr>').append('<td id="dh-'+fieldName+'">'+$('#'+fieldName).val()+'</td>').append('<td id="dh-'+fieldName+'-h">'+hex_sha1($('#'+fieldName).val())+'</td>');
  };

But it looks awful. Is there any way to simplify that?

You only need one .append() call. You can build the entire string of <tr><td></td><td></td></tr> and append it once. It isn't necessarily prettier though. — Michael Berkowski
– Michael Berkowski, Commented Jun 17, 2012 at 16:16
It looks awful because you're "chaining". Separate each method call onto a new line. The snippet could also use some variables. — user1385191
– user1385191, Commented Jun 17, 2012 at 16:17
@Esailija, I've checked the code generated, it is correct - <tbody><tr><td></td><td></td></tr></tbody> — LA_
– LA_, Commented Jun 17, 2012 at 16:24

Roko C. Buljan · Accepted Answer · 2012-06-17 16:29:30Z

1

http://jsbin.com/exopoc/edit#javascript,html,live

function displayHash(fieldName) {

  var cont = '<tr><td id="dh-'+ fieldName +'">'+ fieldName +'</td> <td id="dh-'+ fieldName +'-h">'+ fieldName +'</td></tr>';
  $(cont).appendTo('#dh-values');

}



displayHash('12345678');

answered Jun 17, 2012 at 16:29

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Comments

mplungjan · Accepted Answer · 2012-06-17 16:50:27Z

0

Combined answer of Esalija, amnotiam et al

DEMO

function displayHash(fieldID) {
    var val = $('#'+fieldID).val();
    var valSha = hex_sha1(val);
    $("<tr>").appendTo("#dh-values")
       .append('<td id="dh-'+fieldID+'">'+val+'</td>')
       .append('<td id="dh-'+fieldID+'-h">'+valSha+'</td>');
};

edited Jun 17, 2012 at 16:50

answered Jun 17, 2012 at 16:23

mplungjan

180k29 gold badges183 silver badges246 bronze badges

6 Comments

Esailija Over a year ago

still appending to the tbody though

Esailija Over a year ago

.append returns the jQuery object it operates on

user1106925 Over a year ago

Almost. If this function is called more than once, you'll be selecting all tr elements every time. You only want the new one.

Okan Kocyigit Over a year ago

so now it appends to all tr?

Esailija Over a year ago

You could do with $("<tr>").appendTo("#dh-values").append("td stuff here")

|

Sanjeev Kumar Dangi · Accepted Answer · 2012-06-17 17:31:32Z

0

You should use client side templating engine to separate html structure and business logic for manipulating the data to be binded with template in javascript.

answered Jun 17, 2012 at 17:31

Sanjeev Kumar Dangi

7,4357 gold badges30 silver badges30 bronze badges

Collectives™ on Stack Overflow

Dynamic DOM elements creation

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related