How to optimize a sequence of jQuery appends?

Question

I have a series of jQuery appends that look like this:

moveControls.append("<span>").find("span").last().addClass("absLeft").text("«");
moveControls.append("<span>").find("span").last().addClass("left").text(" ‹ ");
moveControls.append("<span>").find("span").last().addClass("right").text(" › ");
moveControls.append("<span>").find("span").last().addClass("absRight").text("»");

And, writing it out, it seems... Messy, or convoluted. It works perfectly, but I was wondering if there was anything I should be doing instead. Maybe an 'append to' but I still would need to construct the s.

My biggest problem goes with the Append -> Finding the element I just added -> Getting the last element -> Adding classes + text.

I've repeated it several times through out my code, but as a novice, I was just wondering if there was a more efficient way to doing this.

If this is too broad of a question, I apologize. New to Stackoverflow, and this has been a concern for me.

@Pilot My thoughts exactly. Just make your own function. Real programmers use the DOM directly. — rvighne
– rvighne, Commented Feb 12, 2014 at 4:19
Thanks for the input, but I'm already using jQuery and not really interested in learning pure JS (at least, not yet.) But @rvighe, the idea of using my own function is one I should've thought of, before. And probably would've done. — Serg
– Serg, Commented Feb 12, 2014 at 21:53

Arun P Johny · Accepted Answer · 2014-02-12 04:23:40Z

2

One way is

$('<span />', {'class': 'absLeft',text: '«'}).appendTo(moveControls);
$('<span />', {'class': 'left',text: ' ‹ '}).appendTo(moveControls);
$('<span />', {'class': 'right',text: ' › '}).appendTo(moveControls);
$('<span />', {'class': 'absRight',text: '»'}).appendTo(moveControls);

But creating a string and appending it at the end will be more efficient

var arrays = [];
arrays.push('<span class="absLeft">«</span>');
arrays.push('<span class="left"> ‹ </span>');
arrays.push('<span class="right"> › </span>');
arrays.push('<span class="absRight">»</span>');
moveControls.append(arrays.join(''))

edited Feb 12, 2014 at 4:23

answered Feb 12, 2014 at 4:18

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Serg Over a year ago

This is what I went with, a lot more concise, a lot more clear. The first example, that is, but nto with the arrays. Thanks for the help!

MrNobody007 · Accepted Answer · 2014-02-12 04:24:22Z

0

You can place all your class and text in 2d array and loop it:

var arrList = [ ["absLeft","left","right","absRight"], ["«","‹","›","»"] ];

for(var i=0;i<arrList.length;i++)
      $('<span />', {'class': arrList[i][0],text: arrList[i][1]}).appendTo(moveControls);

By this your code will also be flexible to add more types in future.

answered Feb 12, 2014 at 4:24

MrNobody007

1,83711 silver badges32 bronze badges

Comments

Michael · Accepted Answer · 2014-02-12 04:24:33Z

0

Another approach is to setup all your HTML that you're appending, then call jQuery's append() just once.

var arrows = '<span class="absLeft">«</span><span class="left"> ‹ </span><span  class="right"> › </span><span class="absRight">»</span>';

moveControls.append(arrows);

This cuts down on some of the repetitive jQuery code (optimizing readability), but may not optimize for efficiency as much as some alternatives others are suggesting.

answered Feb 12, 2014 at 4:24

Michael

9737 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to optimize a sequence of jQuery appends?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related