javascript - 如何避免在 javascript 中生成重复的 html 代码

Question

这个问题已经有答案了:

How to duplicate a div in JavaScript (1 个回答)

已关闭 3 年前。

也许这是 javascript 世界中的一个常见问题，但我找不到任何有用的关键字来进行有利可图的搜索。长话短说:

我在服务器端生成了 html 代码，假设是这样的

<div id="container">
    <div class="element">
        <!-- yadayada -->
    </div>

    <div class="element">
        <!-- yadayada -->
    </div>
</div>

以及一个客户端脚本，用于添加新元素而无需重新加载页面

<script>
    // do asynchronous server stuff, then add new div from json server output
    var string = "<div class=\"element\">\n" +
                 "    <!-- yadayada -->\n" +
                 "</div>";
    $("#container").prepend($(string));
</script>

好吧，如果<!-- yadayada -->服务器脚本中的内部布局发生更改，JavaScript 代码也必须更改。

如何避免这种情况？我怎样才能只有一个可维护的 yadayada 布局源？

Answer 1

克隆第一个元素并将其添加到容器中，如下所示:

$('.element:first').clone().prependTo('#container');