How can I store HTML content that is going to be appended in more than one line?

Question

After getting success in my AJAX response, I need to append HTML content inside a div. Usually, I do something like this:

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

This is usually fine, except when I have a massive quantity of content that I need to be appended. For example, I need to append this HTML text inside the 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>

I can put this text in one line, yes, but it is massively unorganized, confusing and hard to read.

Is there any way to keep the text uncondensed in the append function? Or is there another jQuery function that allows me not to use this text in one single line?

I would apreciate any help.

What does this have to do with ajax? Is the HTML _returned_ from an ajax call? — isherwood, Apr 29 '22 at 13:59
To do what you ask (*"keep the text uncondensed"*), see [this answer](https://stackoverflow.com/a/805113/2181514) - however it (and the *numerous* other duplicates) are a little out of date and you've also asked *is there another [way to do this]* which is succinctly answered below: use ` — freedomn-m, Apr 29 '22 at 15:50

score 3 · Answer 1 · edited Apr 29 '22 at 13:55

Please see the following demo that stores html in a template element. The good thing with a template element is that by design it doesn't get rendered to the page.

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>

score 1 · Answer 2 · answered Apr 29 '22 at 14:00

You can use a template element to hold the 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>

Other option is to use a string template literal

var 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>
`;

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>

score 0 · Answer 3 · answered Apr 29 '22 at 13:55

Whenever I use jQuery in a project I always create a couple of extension functions for this express purpose.

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

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

They might be included in another library that I'm not aware of by default.

But anyway, with these two functions you can turn this:

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

Into this:

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

To append something more like this:

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

You might do:

$('.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')
                                  )
                   )
     );

score -2 · Answer 4 · answered Apr 29 '22 at 14:15

-2

Please, do not use jquery if you can.

Show this simple example:

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

✌️

answered Apr 29 '22 at 14:15

Yannick Durden

25
8

Would be ok if you actually answered OPs question with vanilla js. – freedomn-m Apr 29 '22 at 15:37

How can I store HTML content that is going to be appended in more than one line?

4 Answers4