Después de tener éxito en mi respuesta AJAX, necesito agregar contenido HTML dentro de un div . Por lo general, hago algo como esto:
$(".parent").append("<div class='child'>Text</div>"); Esto suele estar bien, excepto cuando tengo una gran cantidad de contenido que necesito agregar. Por ejemplo, necesito agregar este texto HTML dentro del div principal:
<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>Puedo poner este texto en una línea, sí, pero está muy desorganizado, es confuso y es difícil de leer.
¿Hay alguna forma de mantener el texto sin condensar en la función de append ? ¿O hay otra función jQuery que me permita no usar este texto en una sola línea?
Agradecería cualquier ayuda.
Consulte la siguiente demostración que almacena html en un elemento de plantilla. Lo bueno de un elemento de plantilla es que, por diseño, no se representa en la página.
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>Puede usar un elemento de plantilla para contener el 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>Otra opción es usar un literal de plantilla de cadena
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>Cada vez que uso jQuery en un proyecto, siempre creo un par de funciones de extensión para este propósito expreso.
function createElement(tag) { return $('<' + tag + '>'); } function createElement(tag, className) { return $('<' + tag + '>').addClass(className); }Es posible que estén incluidos en otra biblioteca que no conozco de forma predeterminada.
Pero de todos modos, con estas dos funciones puedes convertir esto:
$(".parent").append("<div class="child">Text</div>");Dentro de esto:
$('.parent').append(createElement('div', 'child').text('Text'));Para agregar algo más como esto:
<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>Podrías hacer:
$('.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') ) ) );