Question

That one is a tricky one I believe. I would like to merge two tags together. For exemple, those two <span> with different IDs are beside each others like this:

Lorem ipsum <span id="selected-1">dolor sit</span><span id="selected-2" title="important info here"> amet, consectetur</span> adipiscing elit.

At the end, I would like to merge selected-1 and selected-2 and keeping the attributes of selected-2 to finally comes with something like:

Lorem ipsum <span id="selected-2" title="important info here">dolor sit amet, consectetur</span> adipiscing elit.

Any tips? I really can’t figure out this one.

Thanks.

Answer 1

Here’s my 1 line version:

$('#selected-2').html( $('#selected-1').html() + $('#selected-2').html() ).prev().remove();

…and even a shorter version at that.

$('#selected-2').prepend($('#selected-1').html()).prev().remove();

Shorter version = Less code to download (especially for mobile browsers).

---

Edit: Since my short one-line answer was plunged in the ring and is going head-to-head with the longest markup answer on this page, it’s not always about benchmark speed that is important, but simply functionality and maintenance of code.

Besides, calculations-per-second does not equate to real-world and real-browser page rendering which then will reveal no real performance gain in the end.

IMHO, the real-world markup use of one line makes more practical and common sense vs a goliath of code that is prone to user created errors (dot every i and cross every t) which also creates more data (the .js file) to download and parse.