Foro de elhacker.net

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...

function Agregar_Span()
{
      // [...]
}
 

<p><script>Agregar_Span();</script></p>
 

Me va a quedar...

<p><span></span></p>
 

Haz un transpiler o usa templates.

O si quieres algo sencillo y rápido usa tags xD

<b class="AgregarSpan"></b>
 
<script>
(function AgregarSpan() {
  var spans = document.querySelectorAll("b['AgregarSpan']");
  for(var i = 0; i < spans.length; ++i) {
    spans[i].outterHTML = "<span></span>";
  }
})()
</script>
 

O lo que dices tú:

<script>AgregarSpan()</script>
 
<script>
function AgregarSpan() {
  var spans = document.querySelectorAll("script");
  for(var i = 0; i < spans.length; ++i) {
    if(spans[i].innerHTML == "AgregarSpan()") {
      spans[i].outterHTML = "<span></span>";
    }
  }
}
</script>
 

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

Ej:

if(spans[i].innerHTML.length > 14) {
  if(spans[i].innerHTML.substr(0, 12) == "AgregarSpan(" && spans[i].innerHTML.substr(0, -1) == ")" ) {
    var tmp = document.createElement("span");
    tmp.innerHTML = spans[i].innerHTML.substr(11, tmp.innerHTML.length - 12);
    spans[i].outterHTML = tmp.outterHTML;
  }
}

Algo así más o menos.

Pues facil,


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.