javascript - 如何存储要添加到多行中的 HTML 内容？

Question

在 AJAX 响应中获得成功后，我需要在 div 内附加 HTML 内容。通常，我会这样做:

$(".parent").append("<div class='child'>Text</div>");

这通常很好，除非我有大量需要附加的内容。例如，我需要将此 HTML 文本附加到父 div 内:

<div class="mt-5 mb-4 d-flex justify-content-center align-items-center">
    <div class="col-md-5">
        <p>Text example 1</p>
        <i class="some-icon"></i>
    </div>

    <div class="col-md-5">
        <p>Text example 2</p>
        <div>Description</div>
    </div>
</div>

是的，我可以把这段文字写成一行，但它非常杂乱、困惑且难以阅读。

有什么方法可以在 append 函数中保持文本不压缩吗？或者是否有另一个 jQuery 函数允许我不在一行中使用此文本？

我将不胜感激任何帮助。

Answer 1

请参阅以下在模板元素中存储 html 的演示。模板元素的好处是，根据设计，它不会呈现到页面上。

let $template = $($.find("#template1")[0].innerHTML)

$(".parent").append($template);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">

</div>

<template id="template1">
    <div class="mt-5 mb-4 d-flex justify-content-center align-items-center">
        <div class="col-md-5">
            <p>Text example 1</p>
            <i class="some-icon"></i>
        </div>

        <div class="col-md-5">
            <p>Text example 2</p>
            <div>Description</div>
        </div>
    </div>
</template>