elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  (Pregunta): ¿Existe este método para agregar HTML a un elemento?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: (Pregunta): ¿Existe este método para agregar HTML a un elemento?  (Leído 1,591 veces)
Leguim


Desconectado Desconectado

Mensajes: 698



Ver Perfil
(Pregunta): ¿Existe este método para agregar HTML a un elemento?
« en: 27 Julio 2021, 05:08 am »

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.

Código
  1. $('#elemento').html('<h1>titular</h1>');
  2.  

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:

Código
  1. $('#elemento').html(<h1>titular</h1>
  2. <!-- Muchos más "códigos" HTML -->
  3. );
  4.  


En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #1 en: 27 Julio 2021, 08:30 am »

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.

Código
  1. $('#elemento').html(`
  2. <div>
  3.    <h1> Hola mundo! </h1>
  4. </div>
  5. `);
  6.  

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 Desconectado

Mensajes: 698



Ver Perfil
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #2 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:.
En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #3 en: 27 Julio 2021, 21:40 pm »

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
Moderador Global
***
Conectado Conectado

Mensajes: 5.250


I'm fourth.


Ver Perfil WWW
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #4 en: 27 Julio 2021, 22:35 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.
En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #5 en: 27 Julio 2021, 23:33 pm »

Como dice MinusFour puedes usar React, Vue o Angular.

Un ejemplo de Vue podría ser lo siguiente:

HTML

Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Website</title>
  5. </head>
  6. <section id = "app">
  7. <div v-for="article in articles">
  8. <h1>{{article.title}}</h1>
  9. <p>{{article.description}}</p>
  10. <a :href="'articles/' + article.id">Leer mas</a>
  11. </div>
  12. </section>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  14. <script src="script.js"></script>
  15. </body>
  16. </html>
  17.  

javascript
Código
  1. const app = new Vue({
  2. el: '#app',
  3. data: {
  4. articles: [
  5. {
  6. 'id': 1,
  7. 'title': 'Este es el título de mi noticia',
  8. 'description': 'Mi noticia tiene una descripción muy interesante.'
  9. },
  10. {
  11. 'id': 2,
  12. 'title': 'Este es el título de mi otra noticia',
  13. 'description': 'Mi noticia tiene una descripción muy poco interesante.'
  14. }
  15. ]
  16. }
  17. });
  18.  

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

srWhiteSkull


Desconectado Desconectado

Mensajes: 443



Ver Perfil WWW
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #6 en: 27 Julio 2021, 23:51 pm »

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
« Última modificación: 28 Julio 2021, 00:02 am por srWhiteSkull » En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #7 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.)
« Última modificación: 28 Julio 2021, 02:30 am por 3n31ch » En línea

srWhiteSkull


Desconectado Desconectado

Mensajes: 443



Ver Perfil WWW
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #8 en: 28 Julio 2021, 12:24 pm »

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.




En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: (Pregunta): ¿Existe este método para agregar HTML a un elemento?
« Respuesta #9 en: 29 Julio 2021, 06:51 am »

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í  :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
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines