javascript - Attach an HTML block "more times" by avoiding code repetitions -

javascript - Attach an HTML block "more times" by avoiding code repetitions -

supposing i've block mybox defined follows:

<div class="myboxclass" id="mybox"> <h1>my box</h1> <a href="#"><img src="http://placehold.it/350x150" alt="my picture" /></a> <p>lorem ipsum...</p> </div>

then, i've defined 2 containers, containera , containerb:

<div id="containera"> <!-- attach mybox --> </div> <div id="containerb"> <!-- attach mybox --> </div>

i'd attach mybox within 2 containers, avoiding code repetitions.

which best way that?

note: i'm looking client-side solution, useful define responsive sections.

you can by,

$("#containera,#containerb").html($('.myboxclass').clone());

but aware id going repeated. makes html invalid.

demo

and can avoid redundancy giving them unique id after placing them dom,

$("#containera,#containerb") .html($('.myboxclass').clone()) .find('.myboxclass').attr('id', function (i,val) { homecoming val + (i+1); }); demo

if give html construction of myboxclass differs from, shown here, means of additional elements id should write code per t.j said,

$("#containera,#containerb") .html($('.myboxclass').clone()) .find('[id]').attr('id', function (i,val) { homecoming val + (i+1); });

javascript jquery html css