Obtener HTML a través de javascript?

Cergath · 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 (javascript) [Seleccionar]


myElement = document.getElementById("id_a_mostrar");
document.getElementById("ejemplo").innerHTML = myElement.innerHTML;
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 (javascript) [Seleccionar]

myElement = document.getElementsByClassName("uniqueid");
                  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 (javascript) [Seleccionar]

var myElement = document.getElementById("idcualquiera");
			  myElement.innerHTML = "";
			  Array.prototype.forEach.call(document.getElementsByClassName("clasecualquiera"), function(e) {
    			  element.appendChild(e.cloneNode(true));
			  });

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

Edit 3: Oh, creo que pude

Código (javascript) [Seleccionar]

			  var myElement = document.getElementById("idcualquiera");
			  myElement.innerHTML = "";
			  Array.prototype.forEach.call(document.getElementsByClassName("clasecualquiera"), function(e) {
			        var elementclass = element.appendChild(e.cloneNode(true));
			        elementclass.className += " nueva_clase";
			  });

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.

#!drvy · 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

CitarMe 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

[u]nsigned · 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 (javascript) [Seleccionar]


<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8">
      <title>Probando $.each</title>
   </head>
   <body>
   <ul>
   <?foreach($_SERVER as $key=>$value):?>
      <li id="value<?=++$x?>" class="uniqueid"><?=$value?></li>
   <?endforeach?>
   </ul>
   <hr>
   <input type="button" id="miBoton" value="Click Me"><br>
   <div id="caja"></div>
   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script type="text/javascript">
   $('#miBoton').click(
      function(){
         $('#caja').html('');
         $('.uniqueid').each(function(){
            $('#caja').append( "<p>El elemento con ID " + $(this).attr('id')+" tine el valor de "+ $(this).html()+"</p>");
         });
      }
   );
   </script>
   </body>
</html>

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.

Test Foro de elhacker.net SMF 2.1

Obtener HTML a través de javascript?

Cergath

#!drvy

[u]nsigned