1

No consigo que añada un hr entre el class event_1 y class event_2

Este es mi código:

function add_hr() {
  var new_hr = document.createElement('hr');
  var reference = document.getElementsByClassName('event_2');

  for (var ref in reference) {
    reference[ref].parentNode.insertBefore(new_hr, reference[ref]);
  }
}

window.onload = function() {
  add_hr();
};
<div id="whole section">

  <div id="group_a">
    <h3 class="event_1">Heading 1</h3>
    <p> some text </p>

    <h3 class="event_2">Heading 2</h3>
    <p> more text </p>
  </div>

  <div id="group_b"></div>
</div>

8
  • Cambia el getElementByID por un getElementByClassName. developer.mozilla.org/es/docs/Web/API/Document/… Saludos
    – Christian
    Commented el 8 jun. 2017 a las 10:32
  • Puedes usar querySelector si usas un browser mayor que IE8. O getElementsByClassName y tomar el primer elemento de la colección que es compatible con browsers antiguos.
    – ElChiniNet
    Commented el 8 jun. 2017 a las 10:34
  • @Christian eso no funciona, ya lo e intentado
    – Kaiserdj
    Commented el 8 jun. 2017 a las 10:36
  • ¿Tienes algo de código mostrando lo que has intentado hasta ahora? Commented el 8 jun. 2017 a las 10:36
  • 1
    @Kaiserdj Si tienes código debes editar la pregunta y ponerlo ahí; los comentarios no tienen garantía de persistencia (esto es: podrían ser borrados en algún momento futuro) y si tu código está en los comentarios, en la pregunta, la pregunta dejará de tener sentido. Commented el 8 jun. 2017 a las 10:39

2 respuestas 2

3

Para complementar la respuesta de @Christian debo darte unos datos que debes tener en cuenta:

Como te había dicho en los comentarios, si tu soporte es para mínimo Internet Explorer 8, lo mejor es que utilices querySelector, ya que este funciona con selectores CSS y puedes seleccionar al elemento en tu página con esa clase. (Si tienes más elementos con esa clase deberías utilizar querySelectorAll)

Por otro lado, el método getElementsByClassName no devuelve un Array, en su lugar devuelve un objeto HTMLCollection. Este objeto es muy similar a un Array pero no lo es. Lo que mantiene este objeto en común con un Array es que tiene una propiedad length y se puede acceder a sus elementos usando índices, pero no cuenta con los mismos métodos que un Array, por lo que no podrás usar en él métodos como forEach, map, filter, indexOf, etc.

Para que entiendas por qué no lo debes de tratar como un Array utilizaré el mismo código de @Christian:

var items = document.getElementsByClassName("item");

for (var prop in items) {

  console.log(prop);

}
<div class="item">Uno</div>
<div class="item">Dos</div>
<div class="item">Tres</div>
<div class="item">Cuatro</div>

Verás que al intentar recorrerlo con un ciclo for in obtienes otras propiedades aparte de los índices. Por este motivo, si intentas ejecutar en cualquiera de las últimas propiedades algún método de un nodeElement como parentNode o insertBefore te dará un error de ejecución (como ocurre en el código que has situado en tu pregunta).

La mejor manera de recorrer un HTMLCollection es utilizando un ciclo for de un índice inicial a un índice final:

var items = document.getElementsByClassName("item");
var total = items.length;

for (var i = 0; i < total; i++) {

  console.log( items.item(i).innerHTML );

}
<div class="item">Uno</div>
<div class="item">Dos</div>
<div class="item">Tres</div>
<div class="item">Cuatro</div>

O mi preferido (si tu soporte es para Internet Explorer 9+), usando el prototype.forEach del objeto Array, pero enviándole como argumento this el objeto HTMLCollection:

var items = document.getElementsByClassName("item");

Array.prototype.forEach.call(items, function (item) {

  console.log( item.innerHTML );

});
<div class="item">Uno</div>
<div class="item">Dos</div>
<div class="item">Tres</div>
<div class="item">Cuatro</div>

De todas maneras, dado que en tu documento hay un solo elemento con esa clase (al menos en el código que sitúas de ejemplo), lo que podrías hacer es acceder directamente al primer elemento de la colección, ya que sabes que solo hay uno. Algo así:

var reference = document.getElementsByClassName("event_2");
reference.item(0).parentNode.insertBefore(new_hr, reference.item(0));

Información extra:

He visto que has preguntado si funcionaría igual con insertAfter. Lamentablemente no existe el método insertAfter en JavaScript como sí existe en jQuery (nunca me he explicado por qué). Para lograr insertar un nodo después de otro, normalmente se hace con la siguiente técnica:

La condición solo debes realizarla si deseas soportar navegadores más antiguos. En los navegadores actuales, si el nodo tomado como referencia para insertBefore es null o undefined, el elemento se insertará al final de la lista.

//---Si hay un nodo después del nodo tomado como referencia
if (nodo.nextSibling) {

    nodo.parentNode.insertBefore(nodoAInsertar, nodo.nextSibling);

//---Si el nodo tomado como referencia es el último de la lista
} else {

    nodo.parentNode.appendChild(nodoAInsertar);

}
1

Usando getElementsByClassName, te retorna un array de elementos, hay que iterar sobre esos elementos y aplicar el insertBefore.

function add_hr(){
  var new_hr = document.createElement('hr');
  var reference = document.getElementsByClassName('event_2');

  for(var ref in reference)
    {

       reference[ref].parentNode.insertBefore(new_hr, reference[ref]);

    }

}

HTML:

<div id="whole section">

<div id="group_a">
<h3 id="event_1">Heading 1</h3>    
<p> some text </p>

<h3 class="event_2">Heading 2</h3>
<p> more text </p>

</div>
4
  • ¿funciona igual con insterAfter?
    – Kaiserdj
    Commented el 8 jun. 2017 a las 10:57
  • tiene que funcionar igual sí.
    – Christian
    Commented el 8 jun. 2017 a las 10:59
  • Y la ultima pregunta: jsbin.com/duganacusu/edit?html,output Para agregar un div dentro del div de la class (whole section), ¿como se hace?
    – Kaiserdj
    Commented el 8 jun. 2017 a las 11:05
  • De la misma forma que lo hacias en el primer ejemplo, creado un elemento DIV y lo insertas en el id whole por ejemplo.
    – Christian
    Commented el 8 jun. 2017 a las 11:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.