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

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 >
    <div >
        <p>Text example 1</p>
        <i ></i>
    </div>

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

CodePudding user response：

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 >

</div>

<template id="template1">
    <div >
        <div >
            <p>Text example 1</p>
            <i ></i>
        </div>

        <div >
            <p>Text example 2</p>
            <div>Description</div>
        </div>
    </div>
</template>

CodePudding user response：

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 >Text</div>");

Into this:

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

To append something more like this:

<div >
    <div >
        <p>Text example 1</p>
        <i ></i>
    </div>

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

CodePudding user response：

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 >
    <div >
        <p>Text example 1</p>
        <i ></i>
    </div>

    <div >
        <p>Text example 2</p>
        <div>Description</div>
    </div>
</div>
</template>

<button >Add</button>
<div ></div>

Other option is to use a string template literal

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 >Add</button>
<div ></div>

CodePudding user response：

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

✌️

CodePudding user response：

HELLO WORLD IS Append in div id of test when page is load

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