Question

I’ve written the following code to add a clickable “link button” to a section of my page.

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

The code works fine, but it’s ugly and difficult to read with all the string concatenation.

As you can see, I am building anchor elements and div elements with string concatenation. The target of my anchor element is a javascript function invocation with two arguments. Is there a good jQuery way to improve the readability of this code?

Answer 1

I’m not sure if this really improves readability is here is a 100% jQuery solutions:

$(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());

Where “html” in $(html) is the html variable you have in your sample.