Исходный Javascript не добавляет элемент на DOM

Question

У меня есть сайт, построенный в Expression Engine. В фокусе есть фрагмент кода, который обрабатывает запрос JavaScript и создает страницу на основе запроса.

1. У меня есть HTML-страница без заголовка.
2. Эта страница без укладки

Пример:

<div class="top-arrow"><p><!--- Rest of code --></p> 
</div> 
<!-- Html page continues--> 

Я добавил следующий код в моей попытке, и оно не похоже на работу.

var span = document.createElement("span"); //Test element 
span.textContent = "A <span> element."; 

var node = document.getElementsByClassName("top-arrow"); 
node.insertBefore(span); 

Ниже то, что я получаю:

TypeError: node.insertBefore is not a function

node.insertBefore(span);

Как лучше всего я могу добавить текст перед DIV с простым JavaScript.

Answer 1

getElementsByClassName will return array-like node-list which does not have method insertBefore

Node.insertBefore(newNode, referenceNode) метод вставляет указанный узел до опорного узла в качестве дочернего текущего узла (если referenceNode равно нулю, то newNode вставляется в конце списка дочерних узлов)

Примечание:referenceNode не является необязательным аргумента, если нет муравья узла ссылок, проходит null

Попробуйте это:

var span = document.createElement("span"); 
 
span.textContent = "A <span> element."; 
 

 
var node = document.getElementsByClassName("top-arrow")[0]; 
 
//_____________________________________________________^^(Get the first element from collection) 
 
node.insertBefore(span, null);

<div class="top-arrow"> 
 
    <p> 
 
    </p> 
 
</div>

Answer 2

document.getElementsByClassName("top-arrow") вернется живой HTMLCollection. Вы можете использовать его как массив:

node = document.getElementsByClassName("top-arrow")[0]; 

Кроме того, если вы хотите, чтобы новый узел появляться перед темtop-arrow вам нужно сделать:

node.parentNode.insertBefore(span, node); 

Как это node не имеет детей, поэтому нет необходимости делать insertBefore.

Даже если ваш HTML-код не имеет тела и головы, браузер «исправит» ваш HTML-код и добавит его.

Я хотел бы написать такой код:

var span = document.createElement("span"); //Test element 
span.appendChild(document.createTextNode("A <span> element.")); 

var node = document.getElementsByClassName("top-arrow")[0]; 
node.parentNode.insertBefore(span, node); 

Answer 3

Функция getElementsByClassName() возвращает массив, содержащий узлы с классом указанного. Если вы хотите вставитьBefore или добавить что-нибудь к нему, вам нужно указать индекс элемента в этом массиве. Кроме того, insertBefore требует два аргумента в вызове функции (elementToInsert, elemenBeforeWhichYouWantToInsert).Итак, что-то в этом роде должно работать:

document.getElementsByClassName('top-arrow')[0].insertBefore(element, beforeWhatToInsert); 

Answer 4

Спасибо, ребята, за все ваши данные, они очень информативны. Я решил это без необходимости манипулировать моим элементом DOM, просто скопировав динамическую часть страницы и фактически создав новый шаблон в back-end Expression Engine, и моя проблема была решена.