javascript - 动态 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

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 2

Esalija、amnotiam 等人的综合答案

演示

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 3

您应该使用客户端模板引擎来分离 html 结构和业务逻辑，以便在 javascript 中操作要与模板绑定的数据。