CODEWITHSUNDEEP
javascriptjquery
scot
scot

Reputation: 1280

JQuery appending to elements - better techniques?

I am much more of a back-end guy than a Javascript guy. Forgive me for what is probably a Javascript/Jquery newbie question.

When I find myself writing code such this:

var rowDiv = "<div class='row small'> <div class='col-sm-8 small'>" 
    + json['commentary'] + " &ndash; " + json['creation_date'] 
    + "</div><div class='col-sm-4 small'>by "
    +  json['user']
    + "</div></div>"
$('#commentary-container').append(rowDiv)

My code smells detector flashes massive red lights and sounds deafening klaxons. Creating structured data in repeated string concatenation just seems wrong to me.

Is there a programmatic way to create new elements? That might look like;

var rowDiv = $.div().setclass('row small').append(
    $.div().setclass('col-sm-8 small').html(json['commentary'])
) ...

or something similar?

Upvotes: 2

Views: 133

Answers (4)

Ram
Ram

Reputation: 144709

If you are creating many elements dynamically you can consider using templating libraries like Handlebars or Mustache. Using jQuery you can create the elements this way:

var $rowDiv = $('<div/>', {
   'class': 'row small',
   'html' : $('<div/>', { 'class': 'col-sm-8 small' }).html(json['commentary'])
});

How does this work?

jQuery check to see whether it has the corresponding method for the specified property or not, if it has the corresponding method, it calls that method with the specified value, otherwise it sets the value using .attr() method.

// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
    for ( match in context ) {
        // Properties of context are called as methods if possible
        if ( jQuery.isFunction( this[ match ] ) ) {
            this[ match ]( context[ match ] );

        // ...and otherwise set as attributes
        } else {
            this.attr( match, context[ match ] );
        }
    }
}

Upvotes: 7

VtoCorleone
VtoCorleone

Reputation: 17203

You could do something like -

$("<input>").addClass('row small').appendTo("#add");

See this JSFiddle adding the new input and class

Upvotes: 0

developering
developering

Reputation: 1325

For this type of thing I've used a templating system like handlebars in the past(http://handlebarsjs.com/). It basically allows you to define templates that you can inject data into easily. Your example might look something like this in a template:

<div class='row small'> 
  <div class='col-sm-8 small'>
    {{commentary}} &ndash; {{creation_date}}
  </div>
  <div class='col-sm-4 small'>
    by {{user}}
  </div>
</div>"

Take a look at the handlebars site. I thought they did a great job of laying out some basic examples.

Upvotes: 1

alex-phillips
alex-phillips

Reputation: 868

You could create the new div element as a new jQuery element and use functions to set its class/contents then simply append that jQuery element wherever you want. Try something like this:

var newDiv = $('<div/>').addClass('row small').html(json['commentary']);
$('#commentary-container').append(newDiv);

Upvotes: 1

Related Questions