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