如何存盤要附加在多行中的HTML內容？

在我的 AJAX 回應中獲得成功后，我需要將 HTML 內容附加到div. 通常，我會這樣做：

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

這通常很好，除非我有大量需要附加的內容。例如，我需要將此 HTML 文本附加到 parent 中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 函式允許我不在一行中使用此文本？

我會感謝任何幫助。

uj5u.com熱心網友回復：

請參閱以下將 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>

uj5u.com熱心網友回復：

每當我在專案中使用 jQuery 時，我總是為此目的創建幾個擴展函式。

function createElement(tag) {
    return $('<'   tag   '>');
}

function createElement(tag, className) {
    return $('<'   tag   '>').addClass(className);
}

它們可能包含在默認情況下我不知道的另一個庫中。

但無論如何，通過這兩個功能，您可以將其變為：

$(".parent").append("<div hljs-string">">Text</div>");

進入這個：

$('.parent').append(createElement('div', 'child').text('Text'));

要附加更多類似這樣的內容：

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

你可能會這樣做：

$('.appendTarget')
    .append( 
        createElement('div', 'mt-5 mb-4 d-flex justify-content-center align-items-center')
            .append(
                      createElement('div', 'col-md-5')
                           .append(
                                createElement('p').text('My Silly Text'),
                                createElement('i', 'some-icon')
                           ),
                       createElement('div','col-md-5')
                           .append(
                                    createElement('p').text('more text'),
                                    createElement('div').text('Description')
                                  )
                   )
     );

uj5u.com熱心網友回復：

您可以使用模板元素來保存 html。

const template1 = document.querySelector("#myTemplate");
document.querySelector(".add").addEventListener("click", function () {
  const elements = template1.content.cloneNode(true);
  document.querySelector(".out").appendChild(elements);
});

.out > div {
  border: 1px solid black;
}

<template id="myTemplate">
<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>

<button class="add">Add</button>
<div class="out"></div>

其他選項是使用字串模板文字

var myTemplate = `
<div >
    <div >
        <p>Text example 1</p>
        <i ></i>
    </div>

    <div >
        <p>Text example 2</p>
        <div>Description</div>
    </div>
</div>
`;

document.querySelector(".add").addEventListener("click", function() {
  document.querySelector(".out").insertAdjacentHTML('beforeend', myTemplate);
});

.out>div {
  border: 1px solid black;
}

<button class="add">Add</button>
<div class="out"></div>

uj5u.com熱心網友回復：

如果可以，請不要使用 jquery。

展示這個簡單的例子：

const ul = document.getElementById('list');
const child = document.createElement('li');

// if you need to add css class:
// child.classList.add('item');

child.textContent = 'my first li!';

ul.appendChild(child);

??

uj5u.com熱心網友回復：

當頁面加載時，HELLO WORLD IS 附加在測驗的 div 中

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $("#test").append("<h1>Hello World</h1>");
           });
       </script>

標籤：javascript html jQuery 阿贾克斯

上一篇：如何讓SplittingJS在兩個不同的元素上作業？

下一篇：Javascript按物件屬性分組，當屬性是陣列時