Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: MiguelCanellas en 27 Julio 2020, 23:10



Título: [Pregunta]: agregar un elemento span donde se use dicha función..
Publicado por: MiguelCanellas en 27 Julio 2020, 23:10
Hola,

estoy intentando hacer una función con javascript que agegue/cree un elemento <span></span> en la parte donde  se uso la función... es decir...

Código
  1. function Agregar_Span()
  2. {
  3.      // [...]
  4. }
  5.  

Código
  1. <p><script>Agregar_Span();</script></p>
  2.  

Me va a quedar...

Código
  1. <p><span></span></p>
  2.  



Título: Re: [Pregunta]: agregar un elemento span donde se use dicha función..
Publicado por: @XSStringManolo en 28 Julio 2020, 02:52
Haz un transpiler o usa templates.

O si quieres algo sencillo y rápido usa tags xD
Código
  1. <b class="AgregarSpan"></b>
  2.  
  3. <script>
  4. (function AgregarSpan() {
  5.  var spans = document.querySelectorAll("b['AgregarSpan']");
  6.  for(var i = 0; i < spans.length; ++i) {
  7.    spans[i].outterHTML = "<span></span>";
  8.  }
  9. })()
  10. </script>
  11.  

O lo que dices tú:
Código
  1. <script>AgregarSpan()</script>
  2.  
  3. <script>
  4. function AgregarSpan() {
  5.  var spans = document.querySelectorAll("script");
  6.  for(var i = 0; i < spans.length; ++i) {
  7.    if(spans[i].innerHTML == "AgregarSpan()") {
  8.      spans[i].outterHTML = "<span></span>";
  9.    }
  10.  }
  11. }
  12. </script>
  13.  


Si vas a meterle parámetros entre paréntesis usa substr();

Ej:
Código
  1. if(spans[i].innerHTML.length > 14) {
  2.  if(spans[i].innerHTML.substr(0, 12) == "AgregarSpan(" && spans[i].innerHTML.substr(0, -1) == ")" ) {
  3.    var tmp = document.createElement("span");
  4.    tmp.innerHTML = spans[i].innerHTML.substr(11, tmp.innerHTML.length - 12);
  5.    spans[i].outterHTML = tmp.outterHTML;
  6.  }
  7. }

Algo así más o menos.


Título: Re: [Pregunta]: agregar un elemento span donde se use dicha función..
Publicado por: WHK en 28 Julio 2020, 03:52
Pues facil,

Código:
document.write('<span>' + payload + '</span>');

Cuando llames a esa función el DOM escribirá en la misma posición desde donde es llamado, asi que si lo escribes dentro de una división entonces verás su contenido ahi mismo.

Si necesitas escribir la etiqueta de manera dinámica después de toda la carga del DOM (lo cual es lo más recomendado) debes utilizar los selectores https://developer.mozilla.org/es/docs/Web/API/Document/querySelector .

Debes recordar que agregar elementos llamando desde javascript antes de la finalización de la carga del DOM es una mala práctica debido a que el HTML debe ser totalmente independiente a la aplicación de javascript, asi que tu código debiera realmente ir a buscar cada nodo por su id y luego manipularlo a conveniencia. Si no usas ningún framework client side como ReactJS puedes usar jQuery.

Saludos.