How to simplify code to add new elements to a page with jQuery?

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 a开发者_开发知识库nd 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?

---

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.

---

jQuery offers an option for a second argument when creating elements.

var linkButton = $('<a>',{'data-makeId':makeId,
                          href:'#',
                          click:function(){expandMake( makeId, categoryId )},
                          text:'+'
                  });

var div = $('<div>',{ style:'display:none',
                      'class':'models',
                      'data-makeId': makeId
                    })
                      .after('<br>');

$('#linkDiv')
    .empty()
    .append(html)
    .append(linkButton)
    .append( makeName )
    .append(div);

---

EDIT: Fixed an issue where makeName was not appended.

---

Only real way is either abstracting some of your tag generation or spread the script out a little to make it more readable : http://jsfiddle.net/3dYPX/1/

Your also using jQuery so you might want to consider changing the way you trigger the javascript. Try looking into the .live() event. (Ill just get an example up, not that its very important)

Using live event for unobtrusive javascript: http://jsfiddle.net/3dYPX/2/

It is all being done inside of the onLoad event at the moment, just to use as an example.

---

1. Use a template library such as jQuery Templates instead of inlining HTML.
2. Instead of using "javascript:" URLs, attach event handlers to the generated DOM fragments.
3. Refrain from using inline styles.

Something like:

$('#linkDiv')
    .empty()
    .append($.tmpl(myTemplate, {
        makeId: makeId,
        makeName: makeName,
        categoryId: categoryId
    }))
    .click(function () {
        var makeId = $(this).attr("data-makeId");

        if (makeId) {
            expandMake(makeId, $(this).attr("data-categoryId"));
        }
    });

Where myTemplate has the content:

<a href="#" data-makeId="${makeId}" data-categoryId="${categoryId}">${makeName}</a>
<div class="models" data-makeId="${makeId}"></div>

Instead of using an inline style to initially hide the models, hide them all with a general CSS rule, and then selectively show them with a class:

.models { display: none }
.models.shown { display: block }

Just add the "shown" class to show a certain block of models.

---

Here you go:

$('#linkDiv').empty().append([
    $('<a href="#">+</a>').data('makeId', makeId).click(function(e) {
        e.preventDefault();
        expandMake(makeId, categoryId);
    })[0],
    $('<span>').text(makeName)[0],
    $('<div class="models">').data('makeId', makeId).hide()[0],
    $('<br>')[0]
]);

Live demo: http://jsfiddle.net/cncbm/1/

---

Consider this:

$('#linkDiv').data({'makeId': makeId, 'categoryId': categoryId}).empty().append([
    $('<a href="#">+</a>').click(expandMake)[0],
    $('<span>').text(makeName)[0],
    $('<div class="models">').hide()[0]
]);

So, you define that data-stuff on the parent DIV (the common parent) and you re-factor the expandMake function so that it reads those data-values from the parent DIV instead of passing them as arguments.