javascript - 通过避免代码重复附加 HTML block "more times"

Question

假设我有一个 block myBox 定义如下:

<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>

然后，我定义了两个容器，containerA 和 containerB:

<div id="containerA">
    <!-- Attach MyBox -->
</div>
<div id="containerB">
    <!-- Attach MyBox -->
</div>

我想通过避免代码重复将 MyBox 附加到两个容器中。

哪种方法最好？

---

注意:我正在寻找一种客户端解决方案，可用于定义一些响应 部分。

Answer 1

你可以这样做，

$("#containerA,#containerB").html($('.myBoxClass').clone());

但要注意 id 会重复。这使得 html 无效。

DEMO

你可以通过在将它们放入 DOM 后给它们唯一的 id 来避免冗余，

$("#containerA,#containerB")
     .html($('.myBoxClass').clone())
          .find('.myBoxClass').attr('id', function (i,val) {
                 return val + (i+1);
            });

DEMO

如果 myBoxClass 的给定 html 结构与您在此处显示的不同，通过带有 id 的附加元素，那么您应该按照 T.J 所述编写代码,

 $("#containerA,#containerB")
         .html($('.myBoxClass').clone())
              .find('[id]').attr('id', function (i,val) {
                     return val + (i+1);
                });