javascript - Performant append to array of existing DOM elements -

i have following piece of code, loops on array of dom objects, runs test , appends text node if returns true.

$.each( selections, function ( i, e ) {     var test = some_test(e);     if(test) {        $(e).append('passed');     } }); 

whilst code works fine, on large set going perform lot of appends dom. article on reasons use append correctly demonstrates how appending dom far more performant :

var arr = reallylongarray; var texttoinsert = []; var = 0; $.each(arr, function(count, item) {     texttoinsert[i++]  = '<tr><td name="pietd">';     texttoinsert[i++] = item;     texttoinsert[i++] = '</td></tr>'; }); $('table').append(texttoinsert.join('')); 

my question performant way make changes set of existing dom elements without having call .append on each element ? above example demonstrates creation of new element. way ?

what makes live dom manipulations slow fact it's causing dom reflows manipulations made. therefore, should strive reduce amount of dom reflows reducing number of live dom manipulations.

if want manipulate multiple elements part of dom, 1 strategy can used temporarly remove parent of nodes dom, manipulate elements , re-attach parent node was.

in exemple below, detach table before manipulating it's rows , reattach dom. that's 2 reflows rather n reflows.

var data = [1, 2, 3, 4, 5, 6, 7];    populatecells(document.queryselector('table'), data);        function populatecells(table, data) {        var rows = table.rows,        reattachtable = temporarilydetachel(table);        data.foreach(function (num, i) {      rows[i].cells[0].innerhtml = num;    });        reattachtable();  }    function temporarilydetachel(el) {      var parent = el.parentnode,          nextsibling = el.nextsibling;          parent.removechild(el);          return function () {          if (nextsibling) parent.insertbefore(el, nextsibling);          else parent.appendchild(el);      };  }

<table>      <tr><td></td></tr>      <tr><td></td></tr>      <tr><td></td></tr>      <tr><td></td></tr>      <tr><td></td></tr>      <tr><td></td></tr>      <tr><td></td></tr>  </table>