javascript - Multiple iterations of a script involving a NodeList -

i'm replacing element class 'custom' div element has 'hidden' class using code below.

i need run multiple iterations of script each node in nodelist. can't change 'custom' elements, can't assign id's them. realize make multiple copies of script, i'm looking cleaner solution.

i've done looking possible solutions, , think array work? i've never used them in of projects. however, if there no other way guess i'll go multiple copies solution.

<script>   function replacetargetwith( targetclasses, html ){    var targetclass = document.getelementsbyclassname(targetclasses);    var i, div, elm, last, target = targetclass[0];    div = document.createelement('div');    div.innerhtml = html;    = div.childnodes.length;    last = target;    while(i--){      target.parentnode.insertbefore((elm = div.childnodes[i]), last);      last = elm;    }    target.parentnode.removechild(target); } window.onload = function(){   replacetargetwith('custom','<div class="hidden"></div>');   } </script> 

you must iterate targetclasses instead of using targetclasses[0].

function replacetargetwith( targetclasses, html ){   var parser = document.createelement('div');   parser.innerhtml = html;   var targets = document.getelementsbyclassname(targetclasses);   [].slice.call(targets).foreach(function(target) {     var parenttarget = target.parentnode;     [].foreach.call(parser.childnodes, function(child) {       parenttarget.insertbefore(child.clonenode(true), target);     });     parenttarget.removechild(target);   }); } 

function replacetargetwith( targetclasses, html ){    var parser = document.createelement('div');    parser.innerhtml = html;    var targets = document.getelementsbyclassname(targetclasses);    [].slice.call(targets).foreach(function(target) {      var parenttarget = target.parentnode;      [].foreach.call(parser.childnodes, function(child) {        parenttarget.insertbefore(child.clonenode(true), target);      });      parenttarget.removechild(target);    });  }  replacetargetwith('custom', '<div class="hidden">hidden</div>');

.hidden {    opacity: 0.5;  }

<div class="custom">custom</div>  <div class="custom">custom</div>  <div class="custom">custom</div>  <div class="custom">custom</div>

also consider insertadjacenthtml:

function replacetargetwith( targetclasses, html ){   var targets = document.getelementsbyclassname(targetclasses);   [].slice.call(targets).foreach(function(target) {     target.insertadjacenthtml('afterend', html);     target.parentnode.removechild(target);   }); } 

function replacetargetwith( targetclasses, html ){    var targets = document.getelementsbyclassname(targetclasses);    [].slice.call(targets).foreach(function(target) {      target.insertadjacenthtml('afterend', html);      target.parentnode.removechild(target);    });  }  replacetargetwith('custom', '<div class="hidden">hidden</div>');

.hidden {    opacity: 0.5;  }

<div class="custom">custom</div>  <div class="custom">custom</div>  <div class="custom">custom</div>  <div class="custom">custom</div>