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);
}
querySelector
si usas un browser mayor que IE8. OgetElementsByClassName
y tomar el primer elemento de la colección que es compatible con browsers antiguos.