javascript - 如何简化代码以使用 jQuery 将新元素添加到页面？

Question

我编写了以下代码，将可点击的“链接按钮”添加到我的页面的一部分。

var linkButtonHtml = "<a data-makeId='" + makeId + "' href='javascript:expandMake(" + makeId + "," + categoryId + ")'>+</a> " + makeName;
var divHtml = "<div style='display:none' class='models' data-makeId='" + makeId + "'></div>" + "<br/>";
html += linkButtonHtml + divHtml;
$('#linkDiv').html(html);

代码工作正常，但由于所有字符串连接，代码很丑陋且难以阅读。

如您所见，我正在使用字符串连接构建 anchor 元素和 div 元素。我的 anchor 元素的目标是带有两个参数的 JavaScript 函数调用。有没有好的 jQuery 方法来提高这段代码的可读性？

Answer 1

我不确定这是否真的提高了可读性，这里是 100% jQuery 解决方案:

$(html)
  .append(
    $('<a />')
      .attr('data-makeId', makeId)
      .attr('href', 'javascript:void(0);')
      .click(function(event)
      {
        // Prevent clicking the link from leaving the page.
        event.preventDefault();

        expandMake(makeId, categoryId);
      })
      .text('+'))
  .append(
    document.createTextNode(makeName)
  )
  .append(
    $('<div />')
      .addClass('models')
      .attr('data-makeId=', makeId)
      .hide());

其中 $(html) 中的“html”是示例中的 html 变量。