 Autor
|
Tema: (Pregunta): ¿Existe este método para agregar HTML a un elemento? (Leído 5,271 veces)
|
Leguim
 Desconectado
Mensajes: 720
|
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 --> );
|
|
|
|
|
En línea
|
|
|
|
3n31ch
Desconectado
Mensajes: 445
Grandes conocimientos engendran grandes dudas
|
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).
|
|
|
|
« Última modificación: 27 Julio 2021, 08:33 am por 3n31ch »
|
En línea
|
|
|
|
Leguim
Desconectado
Mensajes: 720
|
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í  . |
|
|
|
|
En línea
|
|
|
|
|
engel lex
|
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
|
|
|
|
|
En línea
|
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
|
|
|
|
MinusFour
|
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í . 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.
|
|
|
|
|
En línea
|
|
|
|
3n31ch
Desconectado
Mensajes: 445
Grandes conocimientos engendran grandes dudas
|
Como dice MinusFour puedes usar React, Vue o Angular. Un ejemplo de Vue podría ser lo siguiente: HTML <!DOCTYPE html> <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> </section> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
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). |
|
|
|
« Última modificación: 27 Julio 2021, 23:43 pm por 3n31ch »
|
En línea
|
|
|
|
|
|
3n31ch
Desconectado
Mensajes: 445
Grandes conocimientos engendran grandes dudas
|
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.)
|
|
|
|
« Última modificación: 28 Julio 2021, 02:30 am por 3n31ch »
|
En línea
|
|
|
|
|
srWhiteSkull
|
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-3da39275a694https://marian-caikovski.medium.com/innerhtml-vs-appendchild-e74c763846dfhttps://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnodehttps://jsben.ch/6uEsfEn 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.
|
|
|
|
|
En línea
|
|
|
|
3n31ch
Desconectado
Mensajes: 445
Grandes conocimientos engendran grandes dudas
|
Nunca leiste nada al respecto porque nunca te has molestado en buscarlo pero tranquilo que lo hago por ti Gracias, toda la razón. ...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. 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í . 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
|
|
|
|
|
En línea
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
|
Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
Desarrollo Web
|
Drakaris
|
2
|
2,977
|
2 Octubre 2017, 22:03 pm
por Drakaris
|
|
|
|
(Pregunta): ¿Como puedo eliminar/remover un elemento HTML?
Desarrollo Web
|
Leguim
|
3
|
2,654
|
3 Marzo 2019, 15:30 pm
por EdePC
|
|
|
|
[Pregunta]: Agregar codigo HTML con PHP
Desarrollo Web
|
Leguim
|
4
|
2,312
|
23 Marzo 2019, 06:43 am
por Leguim
|
|
|
|
[Pregunta]: ¿Como ajusto este style de mi boton? (HTML+CSS)
Desarrollo Web
|
Leguim
|
2
|
2,264
|
16 Noviembre 2019, 22:45 pm
por Leguim
|
|
|
|
[Pregunta]: agregar un elemento span donde se use dicha función..
Desarrollo Web
|
Leguim
|
2
|
3,000
|
28 Julio 2020, 03:52 am
por WHK
|
 |
