Hola,
Digamos que las formas tradicionales como .HTML de jquery lo que se requiera es en formato cadena por así decirlo el "código" HTML.
$('#elemento').html('<h1>titular</h1>');
Pero lo que busco es que no necesite insertar ese "código" HTML entre comillas (formato cadena) sino como si fuera HTML "puro" por así decirle. Algo como esto:
$('#elemento').html(<h1>titular</h1>
<!-- Muchos más "códigos" HTML -->
);
Si, puedes hacerlo con ese mismo código pero en vez de comillas simples ' (o comillas dobles ") lo haces con estas comillas ` (alt+96) esas comillas te permiten tener múltiples lineas de código.
$('#elemento').html(`
<div>
<h1> Hola mundo! </h1>
</div>
`);
Aprovecho de mencionar: No recomiendo el uso de jquery a estas alturas de la vida. Que javascript ofrece todo lo que te ofrece jquery igual de facil (existen unas pequeñas excepciones, pero son tan minimas que no lo valen). Por otro lado, quizas quieras usar VUE para hacer lo que estás haciendo (no es necesario que lo apliques como framework, lo puedes usar como libraría y te ahorrará mucho trabajo). Saludos!.
PD: Hay detalles con el método html de jquery, donde se escribe código html nuevo (se reescribe), no ingresas nuevos elementos DOM, en formularios puede ocasionar un problema (te aviso por si acaso).
Hola, gracias por responderme.
Lo que quería era buscar la manera de hacerlo sin hacer uso de el "formato cadena", sino insertar el "código" HTML en crudo por así decirlo...
$('#x').html('<h1>x</h1>'); // por lo general es así
$('#x').html(<h1>x</h1>); // yo lo quisiera así
Gracias, aunque no estoy seguro de que exista algo así :huh:.
no puedes porque es ilogico para js, lo que puedes hacer es crear el elemento en el html invisible y con js copiarlo quitarle el invisible y pegarlo
Cita de: Leguim en 27 Julio 2021, 21:24 PM
Hola, gracias por responderme.
Lo que quería era buscar la manera de hacerlo sin hacer uso de el "formato cadena", sino insertar el "código" HTML en crudo por así decirlo...
$('#x').html('<h1>x</h1>'); // por lo general es así
$('#x').html(<h1>x</h1>); // yo lo quisiera así
Gracias, aunque no estoy seguro de que exista algo así :huh:.
Lo que puedes hacer es usar JSX, pero va de la mano con alguna librería (como React). Quizás es posible adaptar a jQuery pero no le veo mucho sentido.
Como dice MinusFour puedes usar React, Vue o Angular.
Un ejemplo de Vue podría ser lo siguiente:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website</title>
</head>
<body>
<section id = "app">
<div v-for="article in articles">
<h1>{{article.title}}</h1>
<p>{{article.description}}</p>
<a :href="'articles/' + article.id">Leer mas</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="script.js"></script>
</body>
</html>
javascript
const app = new Vue({
el: '#app',
data: {
articles: [
{
'id': 1,
'title': 'Este es el título de mi noticia',
'description': 'Mi noticia tiene una descripción muy interesante.'
},
{
'id': 2,
'title': 'Este es el título de mi otra noticia',
'description': 'Mi noticia tiene una descripción muy poco interesante.'
}
]
}
});
Tienes otras opciones, quizás no tan prolijas, como por ejemplo utilizar un ajax que capture un html y lo inserte dentro de donde tu quieres (básicamente usar componentes de forma primitiva). Pero escribir html directo en js sin usar comillas no tiene sentido. (rompe con el analizador léxico/sintáctico de javascript).
Otra forma mucho más trabajosa es hacerlo con las funciones de DOM de JS, es más eficiente y además no requieres de librerías de terceros con lo que es mejor de mantener
https://www.w3schools.com/jsref/met_node_appendchild.asp
Lo del DOM es un lío, pero muy necesario en caso de que estés trabajando con formularios. Ahora.. si se trata de alguna forma que no requiera librerías y no sea trabajoso usa innerHTML.
De todas formas ¿a que te refieres con que es mas más eficiente? Mas eficiente que jquery o Vue seguro, pero ¿que innerHTML? (Pregunto con total sinceridad, creo que no he leído nunca nada al respecto). Es mas, por simple lógica me parece que appendChild es menos eficiente que innerHTML (por eso de que requieres multiples objetos, anidarlos, etc.)
Cita de: 3n31ch en 28 Julio 2021, 02:26 AM
Lo del DOM es un lío, pero muy necesario en caso de que estés trabajando con formularios. Ahora.. si se trata de alguna forma que no requiera librerías y no sea trabajoso usa innerHTML.
De todas formas ¿a que te refieres con que es mas más eficiente? Mas eficiente que jquery o Vue seguro, pero ¿que innerHTML? (Pregunto con total sinceridad, creo que no he leído nunca nada al respecto). Es mas, por simple lógica me parece que appendChild es menos eficiente que innerHTML (por eso de que requieres multiples objetos, anidarlos, etc.)
Nunca leiste nada al respecto porque nunca te has molestado en buscarlo ;) pero tranquilo que lo hago por ti
https://medium.com/@kevinchi118/innerhtml-vs-createelement-appendchild-3da39275a694
https://marian-caikovski.medium.com/innerhtml-vs-appendchild-e74c763846df
https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode
https://jsben.ch/6uEsf
En resumen,
innerHTML es también una buena alternativa pero en algunos casos no tan eficiente como usar las funciones del
DOM, al fin y al cabo un
innerHTML internamente
parsea la cadena y convierte los elementos que va reconociendo en elementos del
DOM y los agrega al árbol del nodos, pero esto ya sería abrir un debate innecesario en el hilo habiendo
blogs y foros de hace varios años que ya investigaron y discutieron sobre este tema.
Cita de: srWhiteSkull en 28 Julio 2021, 12:24 PM
Nunca leiste nada al respecto porque nunca te has molestado en buscarlo ;) pero tranquilo que lo hago por ti
Gracias, toda la razón.
Cita de: srWhiteSkull en 28 Julio 2021, 12:24 PM
...pero esto ya sería abrir un debate innecesario en el hilo habiendo blogs y foros de hace varios años que ya investigaron y discutieron sobre este tema.
Uff, bueno, igual es discutible. Pero de todas formas tienes razón, no tiene nada que ver con el tema.
Cita de: Leguim en 27 Julio 2021, 21:24 PM
Hola, gracias por responderme.
Lo que quería era buscar la manera de hacerlo sin hacer uso de el "formato cadena", sino insertar el "código" HTML en crudo por así decirlo...
$('#x').html('<h1>x</h1>'); // por lo general es así
$('#x').html(<h1>x</h1>); // yo lo quisiera así
Gracias, aunque no estoy seguro de que exista algo así :huh:.
Retomando la pregunta, porque quieres hacer esto? ¿Quizás quieres que el editor de código te coloree como si fuera html? En dado caso hay plugins en visual studio code que hacen eso. es6-string-html