Adding extra
to existing
on Facebook homepage

Question

I'm writing a Chrome plugin to modify the Facebook homepage.

How would I add an extra <li> to the <ul> with a class of _54nf?

Here's my current code:

function addLabel()
{
var ul = document.getElementsByClassName("_54nf");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Test"));
ul.appendChild(li); // line 6
}

addLabel();

The error I'm getting is:

Uncaught TypeError: undefined is not a function

I presume the problem is getElementsByClassName but I'm not sure.

@Juhana Dunno, that's why I asked. Seem's quirky to manipulate someone else's site. — War10ck, Jul 02 '14 at 20:34
It's manipulating a document on the user's own computer, and a user can do whatever they want with documents they've downloaded. — cookie monster, Jul 02 '14 at 20:35
It's as legal as buying a newspaper and drawing moustaches to everyone in the pictures. — JJJ, Jul 02 '14 at 20:36
@War10ck If you're only doing this in your own browser, it's fine. If you're embedding FB into your page and modifying it, that might be a problem. — Barmar, Jul 02 '14 at 20:42

score 2 · Answer 1 · answered Jul 02 '14 at 20:32

2

getElementsByClassName returns a list of nodes (notice the plural s). Use:

var ul = document.getElementsByClassName("_54nf")[0];

to index down to just the first one.

This assumes there's only one such element on the page, or you only want to modify the first one.

answered Jul 02 '14 at 20:32

Barmar

741,623
53
500
612

1

Or... `document.querySelector("._54nf")` – cookie monster Jul 02 '14 at 20:36
@Barmar Thanks for your reply. When I try this I'm getting the error `Uncaught TypeError: Cannot read property 'appendChild' of undefined` on line 6. Any idea what's wrong? – Sebastian Jul 02 '14 at 20:37
That means that `getElementsByClassName` isn't finding anything that matches the class you gave. Are you sure you got the class name right? Does this class always exist? If not, you need to test `ul.length` before trying to use it. – Barmar Jul 02 '14 at 20:41
Yep, if you search the source of the Facebook homepage there's a `
– Sebastian Jul 02 '14 at 20:43

Adding extra to existing on Facebook homepage

1 Answers1

Adding extra
to existing
on Facebook homepage