Etch-a-Sketch: Introduce learners to 3 new Element methods

[nik-rev]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] Would you like to work on this issue?

Describe your suggestion

In the Introduction to DOM manipulation and events learners are introduced to some handy DOM methods:

• Element.appendChild
• Element.insertBefore
• Element.removeChild
• Element.createElement
• Element.querySelector
• Element.querySelectorAll

And that's about it. After finishing the lesson, learners will use their newfound knowledge in the Revisiting Rock Paper Scissors lesson.

And learners will likely continue using the above methods, but unless they go out of their way to learn about all the methods, some DOM manipulation will be difficult for them

They might want to update an element or replace it with another one. If they don't know about Element.replaceWith, this operation becomes more difficult. Looking back, every single one of my projects using DOM Manipulation completely deleted some elements, then created new ones, and appended them at the same place. It was painful

If i had known about Element.replaceWith at that point, my life would have been easier. Learners should also know about Element.append to add multiple elements or text nodes at once.

Learners are taught to use Element.textContent to set text content of elements, since Element.appendChild will only work on nodes, and won't work with text. Element.append is handy since it automatically wraps strings in Element.createTextNode, and it can append multiple elements

Element.remove is also useful, if learners only know about Element.removeChild then they'll have to find the parent element, call the method on it, and remove child. When they can just use Element.remove to simplify things

Throwing all these new methods into that old lesson can be overwhelming, so let's not do that. Learners can practice those elements in that lesson / revisiting RPS project. I want to add a new section to the Etch a Sketch lesson which teaches learners about these methods:

• Element.append
• Element.replaceWith
• Element.remove

There are other useful ones but I think these are the most important ones to teach

Path

Foundations

Lesson Url

https://www.theodinproject.com/lessons/foundations-etch-a-sketch

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[Rajaravi99]

Hi, Please assign it to me , i can work on it.

[KevinMulhern]

@TheOdinProject/foundations any thoughts on this?

[bycdiaz]

I think I'm reluctant to add references to all the methods that might be useful in a given assignment for a few reasons.

It inches us closer to reproducing documentation and/or it will make learners feel that the lessons can be used as documentation. The more we add to the lesson as far as things that can be found in documentation, the less learners will go to documentation.

I wouldn't object to a remark about inviting learners to explore element methods in the documentation.

[mao-sz]

Seconding this + the suggestion to explore methods in docs. There are loads of really useful methods, some only for very specific situations (but still super handy) that it's just not practical to mention more and more. There's only so much hand holding we should do and beyond that, we should only encourage good research and initiative.

[nik-rev]

Ok I can see where you are coming from. Can we mention something like "There are other methods such as [Element.replaceWith], [Element.append], [Element.remove]. For full reference consult the [documentation]"

I just read the lesson and this section for example:

// adds the indicated style rule to the element in the div variable
div.style.color = "blue";

// adds several style rules
div.style.cssText = "color: blue; background: white;";

// adds several style rules
div.setAttribute("style", "color: blue; background: white;");

Do learners need to know 3 ways to add styles? I think it would be better to remove 2 of those

document.createElement(tagName, [options]) - creates a new element of tag type tagName. [options] in this case means you can add some optional parameters to the function. Don't worry about these at this point.

Let's remove the note about [options] at all, if we can "not worry" about them then why even talk about it in the first place?

// if id exists, update it to 'theDiv', else create an id with value "theDiv"
div.setAttribute("id", "theDiv");

// returns value of specified attribute, in this case "theDiv"
div.getAttribute("id");

// removes specified attribute
div.removeAttribute("id");

What about instead of using methods for setting and getting the attributes the lesson just talked about modifying the property directly, e.g. instead of div.getAttribute("id") why not just div.id ? or div.id = "whatever", imo this is going to make it more straightforward

Adding HTML content

// renders the HTML inside div
div.innerHTML = "<span>Hello World!</span>";

Note that using textContent is preferred over innerHTML for adding text, as innerHTML should be used sparingly to avoid potential security risks. To understand the dangers of using innerHTML, watch this [video about preventing the most common cross-site scripting attack](https://youtube.com/watch?v=ns1LX6mEvyM).

Mentioning innerHTML then not recommending it makes not that much sense to me tbh, maybe we should just remove that section? Maybe add a warning "you may come across innerHTML, don't use it" etc would be better

Also this:

Document Object Model

The DOM (or Document Object Model) is a tree-like representation of the contents of a webpage - a tree of "nodes" with different relationships depending on how they're arranged in the HTML document. There are many types of nodes, most of which are not commonly used. In this lesson we will be focusing on "element" nodes which are primarily used for manipulating the DOM.

<div id="container">
  <div class="display"></div>
  <div class="controls"></div>
</div>

In the above example, the <div class="display"></div> is a "child" of <div id="container"></div> and a "sibling" to <div class="controls"></div>. Think of it like a family tree. <div id="container"></div> is a parent, with its children on the next level, each on their own "branch".

Can maybe be worded a little differently? Also I don't understand why we need to use divs with id here. Why something like <div> <span></span> <p>hello world</p> </div> then instead of referring to them as div class whatever we can use use <div>, it'll be cleaner i think

Learners also don't know about trees at this point, and neither do they know about elements. instead of introducing is as a tree of nodes let's introduce it as a tree of elements, then make the correction later?

Also I think adding a picture like this would be a good idea (id make a better one)

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[ManonLef]

We will close this, since the topics mentioned will come to the attention of learners naturally while they progress + the etch a sketch project is a project, not a lesson to introduce new content and they will already have all the tools to complete it within the current learning path.