Question 69644 in Ajax Question posted in
You can find the official documentation here.

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

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.

Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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')
                                  )
                   )
     );
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

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

    ✌️

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search