Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Owa Aquino
Owa Aquino
19,277 Points
Posted by Owa Aquino
Owa Aquino
19,277 Points

A question on DOM selectors.

Hi Guys!

Just want to clarify about this two selector

by getting ahead on the video I used this code below:

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const mainDiv = document.getElemenstByClassName('.main');
const ul = document.getElementById('invitedList');

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckbox = document.createElement('input');

filterLabel.textContent = "Hide those who haven't responded:";
filterCheckbox.type = 'checkbox';


div.appendChild(filterLabel);
div.appendChild(filterCheckbox);

mainDiv.insertBefore(div, ul);

but the console gave me an error that said "Uncaught TypeError: mainDiv.insertBefore is not a function".

but when I get back on the video and follow Guils code he uses quesySelector

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const mainDiv = document.querySelector('.main');
const ul = document.getElementById('invitedList');

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckbox = document.createElement('input');

filterLabel.textContent = "Hide those who haven't responded:";
filterCheckbox.type = 'checkbox';


div.appendChild(filterLabel);
div.appendChild(filterCheckbox);

mainDiv.insertBefore(div, ul);

My question is isn't it supposed to do the same? I mean it should work as well. Because we only used different approach in selecting the class? Right?

I'll really appreciate your responses :)

Thanks!

Owa

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

getElementsByClassName returns a HTMLCollection (list of Elements) even if there is only one matching Element. querySelector returns a single Element even if there are multiple matches. insertBefore is a method that belongs to an Element, not a HTMLCollection.

If you change your code to pull out the first Element from the HTMLCollection like this:

const mainDiv = document.getElementsByClassName('.main')[0];

Then that should work as well.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

This line here is what I really need : "insertBefore is a method that belongs to an Element, not a HTMLCollection."

Thank you very much sir!

Owa