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
Jonas Wu
13,928 PointsCan 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
231,261 PointsYou'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
13,928 PointsThank 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
231,261 PointsIt'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!