Question

I am wondering if there is a better way to write this JavaScript (Jquery) code.
This snippet dynamically created a H3 with a link.

My designer is going nuts trying to style this as its in JavaScript.
I am trying to re-write / refactor this into to smaller chunks to allow my designer to style without looking at all this code on one single line.

var dvClassContainer = $(document.createElement('div')).attr("id", 'dvclassconatiner_' + classVal).attr("classifname", classifname).attr("memclassnumber", memclassnumber).html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

I was thinking of creating more variables and combining them together.
Is there a ‘cleaner’ way of writing this?

Answer 1

If you utilize more of jQuery’s features, the code becomes more readable and more easily maintained:

var dvClassContainer = $('<div>');
dvClassContainer.attr({
  id: 'dvclasscontainer_'+classVal,
  classifname: classifname,
  memclassnumber: memclassnumber
});
var dvHeader = $('<h3>');
var dvHeaderLink = $('<a>Delete</a>');
dvHeaderLink.attr({
  id: 'ancclassremove_'+classVal,
  classVal: 'classVal',
  class: 'buttons delete btnSmall'
}).on('click',function(){
  RemoveClassificationUponConfirm(classVal);
});
var dvImg = $('<img>');
dvImg.attr({
  id: 'imgloadRemClass_'+classVal,
  alt: 'loading',
  src: '../Images/application/smallUploading.gif'
});
dvClassContainer.append(dvHeader.append(dvHeaderLink.append(dvImg)));

Ideally, you would also want to move all those non-standard attributes (classifname, memclassnumber, classVal) to data- attributes, which would be accessible via jQuery’s data() function.