Need help understanding the basics js

I would like to thank you for the html and css courses, they were really useful and interesting. Now I started to learn js, and I often see the following ’ document.querySelector’, ‘document.createElement’, ’ list.appendChild(listItem)’ and I don’t understand what they are for. I tried to find a lesson about them on your site, but I didn’t find anything, can you give a link to this lesson if there is one at all. Thank you in advance

Welcome back @eGO_Vitae

I’m glad to hear that. :slightly_smiling_face:

When working with JS we often want to interact with the HTML of our page. For example, change the text of a paragraph or add another <li> to a list. To make this possible there are various APIs that connect JS with HTML.

Short explanation:

  • querySelector: Use a CSS selector to return the first HTML element that matches the selector. If you save the returned element into a variable you can then use it in your JS code.
  • createElement: Creates a new HTML element.
  • appendChild: Adds a element as a child to another element. In your case there is probably an <ul> or <ol> saved in the “list” variable and a <li> saved in the “listItem” variable. list.appendChild(listItem) will add the <li> as the last child to the <ul> (or <ol>).

I think there isn’t a specific lesson about interacting with HTML from JS. In the JS lessons these methods are seen as helpers to display results. All these methods like querySelector() have own articles on MDN if you want to dig deeper. Just search for e. g. “querySelector” on MDN to reach these articles. (Document: querySelector() method)
Most of the time the short introduction paragraph on these articles is enough to generally understand what they are about.

I hope that helps,
Michael

1 Like