javascript - How to reveal multiple html? -

suppose that, got pseudocode:

itemset1[apple,orange] itemset2[banana,potato]  <div>   <header>     <h3>mylist</h3>    </header>    <ul>     <li>itemset1[]</li>   </ul> </div>   <div>   <header>     <h3>mylist</h3>    </header>    <ul>     <li>itemset2[]</li>   </ul> </div> 

is there way letting me write once html code?

<div>   <header>     <h3>mylist</h3>    </header>    <ul>     <li>items</li>   </ul> </div> 

and reveals twice first example(one itemset1 , 1 itemset2) can use evrything javascript or php prefer javascript

there're 2 ways (or more?). rendering php or javascript.

with php @ view

for example, using foreach ($itemset1 $item) want.

<div>     <header>         <h3>mylist</h3>     </header>     <ul>     <?php foreach ( $itemset1 $item ) { ?>         <li><?php echo $item ?></li>     <?php } ?>     </ul> </div> 

with javascript

in case, i'm using angularjs rendering data. assuming have known angularjs , have been prepared that.

<div>     <header>         <h3>mylist</h3>     </header>     <ul>         <li ng-repeat="item in itemset1">{{ item }}</li>     </ul> </div> 

of course, if like, jquery choice you. hate jquery append expression. , it's inconvenient.

see reference:

php: foreach - manaual

angularjs: api: ngrepeat