appendChild is not a function error (JAVASCRIPT)

Question

I have this piece

var inviteSection = document.getElementByClassName("invitedFriends");
var friend = document.createElement("div").class = "friend";

var mail = document.createElement("p").class = "mail";
var span = document.createElement("span").class = "status accepted";

function main() {
    inviteSection.appendChild(friend);

    friend.appendChild(mail);
    friend.appendChild(span);
}

main();

When I run this chrome console it says 'Uncaught TypeError: inviteSection.appendChild is not a function' Is there any fix for this please help me guys!

Answer 1

The problem is that, as Akshay Arora points out, the method for getting elements by class name has to be plural. The implication is that it will always return an array-like collection of elements, even if it only finds one element with that class name. (This is what Arun P Johny meant by NodeList.)

If you're absolutely sure that there will only ever be the one element with that class name, then you just need to change the first line to

var inviteSection = document.getElementsByClassName("invitedFriends")[0];

If there is ever more than one element with this class name, this will just give you the first element.