如何避免 Section 标签中出现相同的 html 代码？

Question

I have 3 sections with the same html code inside, how can I avoid that, is there a way to just give them a piece of html code or as a code template by html,javascript...etc Thanks, with regards.

    <section class="Movie-list-1"> 
       <h1> New movies </h1>
       <!--  10 divs here-->
    </section>
    <section class="Movie-list-2"> 
        <h1> 4k movies </h1>
     <!-- 10 divs here -->
    </section>
    <section class="Movie-list-3"> 
       <h1> New movies </h1>
     <!--  10 divs here -->
    </section>

Answer 1

You can create a <template> and reuse it in a custom element with slots :

 customElements.define('movie-list', class MovieList extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }).appendChild(document.getElementById('movie-list').content.cloneNode(true)); } })

 <template id="movie-list"> <section class="movie-list"> <h1><slot name="title">New movies</slot></h1> <slot name="divs"></slot> </section> </template> <movie-list> <span slot="title">New Movies</span> <div slot="divs"> <div>Foo</div> <div>Bar</div> <div>Baz</div> </div> </movie-list> <movie-list> <span slot="title">Top Movies</span> <div slot="divs"> <div>Foo??</div> <div>Bar?!</div> <div>Baz!?</div> </div> </movie-list>

This is what it looks like in the DOM: