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

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Obtener HTML a través de javascript?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Obtener HTML a través de javascript?  (Leído 2,316 veces)
Cergath


Desconectado Desconectado

Mensajes: 340



Ver Perfil
Obtener HTML a través de javascript?
« en: 2 Junio 2015, 18:54 pm »
Hola,

Estoy modificando un script escrito en PHP que carece de un template engine, el tema básicamente está embebido dentro de la escritura del código PHP, lo que dificulta muchísimo su edición...

Me veo atorado con algo que quiero hacer, y es que tocaría modificar demasiados archivos si quisiera lograrlo, lo cual sin duda me traería varios problemas... Entonces pensé en algo...

¿Es posible obtener el elemento HTML con su ID y mostrarlo las X veces que se repita?, necesito renderizar lo que sería un pequeño 'newsfeed' que viene con el script, que muestra un listado básico de noticias...

Sé que iría algo como:
Código
  1. myElement = document.getElementById("id_a_mostrar");
  2. document.getElementById("ejemplo").innerHTML = myElement.innerHTML;
  3. document.getElementById("ejemplo").style.display = "inline-block";

Y con javascript darle el estilo que necesito que tenga... Bueno, en fin... La cuestión es que por defecto eso solo me va a mostrar un resultado, el primero... El código javascript no va a repetirse por cada uno de los IDs... ¿oh sí?

Porque ya probé pero en efecto solo me muestra un resultado, el primero... ¿Será que hice algo mal?, ¿estoy en lo erróneo con lo que quiero hacer? De ser así, ¿cuál sería la alternativa? (a no tener que modificar tantos archivos del script para hacer lo que necesito)

Edit: veo que una opción podría ser getElementsByClassName, pero no me funciona al intentar ponerlos dentro de la ID :( no me muestra nada
Código
  1. myElement = document.getElementsByClassName("uniqueid");
  2.                   document.getElementByID("ejemplo").innerHTML = myElement.innerHTML;
Jajaja perdón la ignorancia  :-(


Me acabo de enterar que getElementsByClassName no tiene innerHTML por ser NodeList ;P entonces usé cloneNode

Qué novatada pero, ¿cómo rayos hago para almacenar el resultado de cloneNode en una variable? :( rayos

Código
  1. var myElement = document.getElementById("idcualquiera");
  2. 			  myElement.innerHTML = "";
  3. 			  Array.prototype.forEach.call(document.getElementsByClassName("clasecualquiera"), function(e) {
  4.     			  element.appendChild(e.cloneNode(true));
  5. 			  });

La necesito para poder asignarle una clase a cada resultado (elementclass.className += " nueva_clase";)

Edit 3: Oh, creo que pude

Código
  1. 			  var myElement = document.getElementById("idcualquiera");
  2. 			  myElement.innerHTML = "";
  3. 			  Array.prototype.forEach.call(document.getElementsByClassName("clasecualquiera"), function(e) {
  4. 			        var elementclass = element.appendChild(e.cloneNode(true));
  5. 			        elementclass.className += " nueva_clase";
  6. 			  });

Jejeje ¿cómo podría poner HTML para cada elemento?, no solo una clase css, sino html? ;P he probado con InnerHTML pero no sé cómo escribirlo porque no me funciona :(

Mod: No hacer triple post.
« Última modificación: 3 Junio 2015, 19:25 pm por #!drvy » En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Obtener HTML a través de javascript?
« Respuesta #1 en: 3 Junio 2015, 19:46 pm »
Lo que buscas es insertBefore y appendChild. Lo que quieres hacer es bastante complicado y el DOM es algo muy inestable.. al mínimo error vas a caer en muchos problemas.

Quizás esto te solucione un poco lo que buscas.
http://stackoverflow.com/a/6838159

Citar
Me veo atorado con algo que quiero hacer, y es que tocaría modificar demasiados archivos si quisiera lograrlo, lo cual sin duda me traería varios problemas...

Piensa que te vas a complicar ahora pero luego todo te sera mas facil. Es un error que solucionaras una sola vez. En cambio, si luego vas a hacer mas cambios, con lo que estas haciendo vas a tener que estar retocando todo el tiempo.

Saludos
En línea
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Obtener HTML a través de javascript?
« Respuesta #2 en: 9 Junio 2015, 08:32 am »
getElementByID, getElementByTagName y todo lo que era DHTML ya es obsoleto, no se usa, hay soluciones mucho mejores apra manejar el DOM y AJAX con javascript, y es usar jQuery. Por ejemplo lo que queres ahcer con jQuery se haria con una simple funcion $.each, te pongo un ejemplo:

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>Probando $.each</title>
  6.    </head>
  7.    <body>
  8.    <ul>
  9.    <?foreach($_SERVER as $key=>$value):?>
  10.       <li id="value<?=++$x?>" class="uniqueid"><?=$value?></li>
  11.    <?endforeach?>
  12.    </ul>
  13.    <hr>
  14.    <input type="button" id="miBoton" value="Click Me"><br>
  15.    <div id="caja"></div>
  16.    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  17.    <script type="text/javascript">
  18.    $('#miBoton').click(
  19.       function(){
  20.          $('#caja').html('');
  21.          $('.uniqueid').each(function(){
  22.             $('#caja').append( "<p>El elemento con ID " + $(this).attr('id')+" tine el valor de "+ $(this).html()+"</p>");
  23.          });
  24.       }
  25.    );
  26.    </script>
  27.    </body>
  28. </html>
  29.  

Este script primero crea una lista a partir del array $_SERVER (informacion del servidor PHP). Luego con jQuery utiliza la funcion each para recorrer la todos el array confomardo por todos los elementos con class "uniqueid", y luego muestra el valor de cada uno en un div con id "caja" creado un nuevo elemento p por cada item.
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Swf,html o javascript
Diseño Gráfico 		Sirena_Dejavu 6 3,817 Último mensaje 2 Julio 2004, 09:56 am
por theskull
Programacion en HTML, PHP, javascript
PHP 		Daniel G 0 1,796 Último mensaje 26 Abril 2007, 16:32 pm
por Daniel G
Html/javascript Injection
Nivel Web 		Dacan 2 5,321 Último mensaje 17 Marzo 2011, 13:49 pm
por Castg!
Ver html generado por javascript
Desarrollo Web 		desastro 5 4,102 Último mensaje 13 Septiembre 2011, 08:15 am
por WHK
[JS]Obtener más votos en una encuesta código javascript(Jquery, AJAX, PHP, HTML)
Desarrollo Web 		buadaba 2 5,746 Último mensaje 14 Febrero 2013, 22:34 pm
por buadaba
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines