Dynamic DOM элементы создания

Question

Я должен добавить строки в таблицу с JQuery:

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

я написал следующий код:

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>'); 
    }; 

Но это выглядит ужасно. Есть ли способ упростить это?

Answer 1

Комбинированный ответ Esalija, amnotiam и др

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>'); 
}; 

Answer 2

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'); 

Answer 3

Вы должны использовать client side templating engine отделить HTML структуру и бизнес-логику для работы с данными, которые будут переплетены с шаблоном в javascript.