Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Using jQuery Plugins Add a Sticky Navigation Bar Understanding Plugin Events

Jonas Wu
Jonas Wu
13,928 Points

Can I also write in the way of DOM?

I'd like to know if we can also write the code with DOM ?

For example: $(".header").on('sticky-start', () =>{ const h1 = document.querySelector('.description'); h1.innerHTML = 'We build a <strong> great </strong> app'; }); The code above runs successfully .

$('.work').on('sticky-start', function(){ $(this).append(' <a href="mailto:email@website.com" class="email-text">EmailĀ us</a>') }); Can I also write the code above in the form of DOM?

2 Answers

Steven Parker
Steven Parker
218,813 Points

You're using the DOM with that code already. I'm guessing what you really want to know is if you can do the same thing in plain JavaScript instead of with jQuery.

You can certainly do parts of it, like instead of "$(this).append" you could call createElement and then appendChild.

But you're using a jQuery plug-in that makes use of custom events, so you need jQuery to handle that part. There's no standard browser event named "sticky-start".

Jonas Wu
Jonas Wu
13,928 Points

Thank you Steven!

I think i made it. First, I set const email = document.createElement('a'); in the global scope. then, $('.work').on('sticky-start', () =>{ email.setAttribute('href','"mailto:email@website.com'); work.appendChild(email); });

But I'm not sure if it's a good way to use plain JavaScript while using jQuery plug-in. lol

Steven Parker
Steven Parker
218,813 Points

It's certainly not a problem, but my thinking is if you have jQuery loaded, you may as well take advantage of it to make your code more compact.

Happy coding!