本机Javascript不会在DOM上附加元素

Question

I have a website built in Expression Engine. In the back-end there is a code snippet that takes care of a JavaScript request and build a page based on the request.

1. I have a HTML Page without head tag.
2. This page is without styling

Sample:

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

I have added the following code in my attempt and it doesnt seem to work.

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

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

Below is what I get:

TypeError: node.insertBefore is not a function

node.insertBefore(span);

How best can I append text before the div with plain JavaScript.

Answer 1

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

The Node.insertBefore(newNode, referenceNode) method inserts the specified node before the reference node as a child of the current node(If referenceNode is null, the newNode is inserted at the end of the list of child nodes)

Note: referenceNode is not an optional argument, if there is no ant ref node, pass null

Try this:

 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") will return a live HTMLCollection . You can use it like an array:

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

Also, if you want the new node to appear before top-arrow you need to do:

node.parentNode.insertBefore(span, node);

As it is node has no children, so there is no need to do insertBefore .

Even though your HTML code has no body and head, the browser will 'fix' your HTML and add one.

I would write your code like this:

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

Function getElementsByClassName() returns an array containing nodes with class specified. If you want to insertBefore or append anything to it you need to specify index of an element in this array. Also, insertBefore requires two arguments in function call (elementToInsert, elemenBeforeWhichYouWantToInsert). So, something like this should work:

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

Answer 4

Thank you guys for all your input they are very informative. I have solved this without the need of manipulating my DOM element by simply copying the dynamic part of the page and actually creating a new template in the back-end of Expression Engine and my problem was solved.