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
Tomasz Sporys
11,258 PointsHow do we know the position of the object (for example "<button>") using jQuery Append() method?
Question no1
In jQuery Basics the teacher adds a button to the page would say programmatically using Append() method and not touching index.html. How if do it How do we now where it's going to appear?
Question no2 Is it the same if the button was hidden when page is loaded and hidden when needed?
2 Answers
Jacob Mishkin
23,118 Pointsfor question number !:
the reason you know where the button will be placed in the html is by the class you are using in the jquery here is an example:
$(".Holder").append("<button>click here</button>");
above the button will be placed in the div with the class Holder. there is how you know where things are going.
number 2. the answer for that is up to you. in the video the button is to be hidden for the reveal.
Tzili Hod
5,836 PointsThanks for your explanation Jacob. I have a question related to number 1. The append method adds the button (or whatever element you choose) to the END of the Holder class. Why is it that the button is placed over the spoiler text? Wouldn't it be inserted right below it? I know the spoiler text is hidden first....does it get removed from the DOM, therefore making that spot the end of the spoiler class? I thought hiding means it's just not visible in the UI, but it's still there in the DOM.
Jacob Mishkin
23,118 PointsNot a problem. The reason the button is not below the text is because it is appended to the .spoiler div. It is inside that div. if it was below it, it would be in the container div that has the star wars background; also check out workspaces, its a continuos problem on the Treehouse videos that they forget to mention the CSS used to style the elements they are using. I'm not sure what styles are being applied, but I'm sure there is. It's because of the CSS the button is where it is and what it looks like. The span tag or the text nested inside the div is hidden, its still in the DOM, but hidden, much like display none, in CSS. Remember there is really no top middle bottom in a div, think of a div as a box with a bunch of stuff, and by using CSS you can put things in that box were you want them. If you have any other questions please feel free to ask.
I hope this helps.
Arikaturika Tumojenko
8,897 PointsJust like Jacob Mishkin said , the button is affected by the CSS in the style.css style sheet. That's why it appears where it does. Try to comment out the code in the CSS file and you'll see that all elements (including the button) appear as block elements and no style applied.
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 PointsGavin Broekema
Full Stack JavaScript Techdegree Student 22,443 PointsWhich is the prefered method? I've read about HTML, CSS, and JavaScript overlapping becoming more common and less enforced, but where does this particular case fall?