Jquery condense statements without losing readability

Question

How would I go about condensing this? Is there a better way?

        // Add wrapper tags
        $(this).append('<div class="jC2_Outer">');
        $(this).append('<div class="jC2_Toolbar">');
        $(this).append('<a href="#">Copy</a>');
        $(this).append('<a href="#">Plain Text</a>');
        $(this).append('<a href="#">Link</a>');
        $(this).append('<a href="#">Help</a>');
        $(this).append('</div>');
        $(this).append('<div class="jC2_Container">rg');

Also, the append function closes the divs, how should I be adding these onto the document so they don't close? Doing this at the moment which isn't working:

$('.inner').append('</div></div>');

Answer 1

You can join an Array.

var content = [
'<div class="jC2_Outer">',
    '<div class="jC2_Toolbar">',
        '<a href="#">Copy</a>',
        '<a href="#">Plain Text</a>',
        '<a href="#">Link</a>',
        '<a href="#">Help</a>',
        '<div class="jC2_Container">rg</div>',
    '</div>',
 '</div>'
];

$(this).append(content.join(''));

Answer 2

var str = '';

str += '<div class="jC2_Outer">';
str += '<div class="jC2_Toolbar">';
str += '<a href="#">Copy</a>';
str += '<a href="#">Plain Text</a>';
str += '<a href="#">Link</a>';
str += '<a href="#">Help</a>';
str += '</div>';
str += '<div class="jC2_Container">rg';

$(this).append(str);

Each time your doing $(this) , you're building new jQuery object, which isn't optimal. At the least you should be caching it:

var self = $(this);

self.append(...);
self.append(...);
self.append(...);

Whenever you using append() , the HTML included must be valid (all closed). You cannot close the tags you opened in another append() later down the line. Otherwise they will be closed for you, so you end up with:

$(this).append('<div class="jC2_Outer"></div>');
$(this).append('<div class="jC2_Toolbar"></div>');
$(this).append('<a href="#">Copy</a>');
$(this).append('<a href="#">Plain Text</a>');
$(this).append('<a href="#">Link</a>');
$(this).append('<a href="#">Help</a>');
//....

Answer 3

var mytext='<div class="jC2_Outer">\
        <div class="jC2_Toolbar">\
        <a href="#">Copy</a>\
        <a href="#">Plain Text</a>\
        <a href="#">Link</a>\
        <a href="#">Help</a>\
        </div>\
        <div class="jC2_Container">rg';
$(this).append(mytext);

This offers better optimization in that your not creating a new jquery object each time and it's also a lot less to type.

Answer 4

$(this).append(
    '<div class="jC2_Outer">'
  + '<div class="jC2_Toolbar">'
  + '<a href="#">Copy</a>'
  + '<a href="#">Plain Text</a>'
  + '<a href="#">Link</a>'
  + '<a href="#">Help</a>'
  + '</div>'
  + '<div class="jC2_Container">rg'
);

Answer 5

为什么不将整个HTML块仅附加到一个append（）调用中？

$(this).append('<div class="jC2_Outer"><div class="jC2_Toolbar"><a href="#">Copy</a><a href="#">Plain Text</a><a href="#">Link</a><a href="#">Help</a></div><div class="jC2_Container">rg</div></div>');

Answer 6

There are a couple ways; it's hard to see what you're trying to do without the context. But here are a couple choices:

Chaining:

$(this).append('<div class="jC2_Outer">')
       .append('<div class="jC2_Toolbar">')
       .append('<a href="#">Copy</a>')
       .append('<a href="#">Plain Text</a>')
       .append('<a href="#">Link</a>')
       .append('<a href="#">Help</a>')
       .append('<div class="jC2_Container"></div>');

Concatenation:

$(this).append('<div class="jC2_Outer">\
                <div class="jC2_Toolbar">\
                <a href="#">Copy</a>\
                <a href="#">Plain Text</a>\
                <a href="#">Link</a>'\
                <a href="#">Help</a>\
                </div>\
                <div class="jC2_Container">');