1. How far did you get?
2. What challenges did you face?

There's more we can do with the DOM, and it only gets more fun!

• .textContent
  • Returns any text inside of the element (except comments) including child element contents.
  • Advantage over innerHTML because the browser doesn't have to parse the HTML.
  • Can set text as well
• innerHTML
  • This returns all contents of the element (including comments) and has to parse the HTML.
  • Also sets text, but can add HTML.

Up to this point, we've been manipulating things that are already present on the DOM. Let's create some.

• .createElement()
  • Allows you to generate any valid HTML tag.
  • You can optionally pass a second argument to this method to give it content, but there is a better way that we will cover next.
• .appendChild()
  • Adds a node to the end of a parent node's list of children.
  • Be careful about chaining methods, you may get an unexpected result.
• .append()
  • Appends a list of child nodes to a parent node.
  • This is experimental, but it works in several browsers. Be aware that it could change.
• .insertBefore()
  • Out of order insertion!
  • Takes two arguments: the new node you're inserting, and the child node that you're inserting before.
  • Must be referenced using a parent node to start with.
• Adding attributes to any element.

  Just use dot notation!

  • .id

    • 
          var myPTag = document.createElement("p");
          myPTag.id = 'paragraphId';
          myPTag.innerHTML = 'This is my amazing paragraph';
      
          parent.appendChild(myPTag);
                                              

  • .className

    • 
              var h1 = document.createElement('h1');
              h1.className = 'headingClass';
              h1.textContent = 'The headline to an article';
      
              parent.appendChild(h1);
                                              

  • .classList

    • 
                  var h1 = document.getElementsByTagName('h1')[0];
                  var bool = true;
      
                  //Add a class to an element
                  h1.classList.add('pull-left');
      
                  //Remove a class from an element
                  h1.classList.remove('pull-left');
      
                  //Toggle a class on an element
                  h1.classList.toggle('pull-right', [**optional**]bool);
      
                  //Replace one class with another, kind of like toggle
                  h1.classList.replace('pull-left', 'pull-right');
      
                  //Check if a class exists on an element
                  h1.classList.contains('pull-left');
                                                  

  • .setAttribute()

    • 
                  var image = document.getElementsByTagName('img')[0];
      
                  //Check what the attributes are on the img element
                  image.getAttribute('alt');
      
                  //Remove an attribute from an element
                  //only works with inline attributes on the element itself
                  image.removeAttribute('class');
      
                  //Set an attribute on an element
                  //Caveat: if you're dealing with boolean values, you can just set the attribute itself, and no value.
                  image.setAttrbute('alt', 'Our Logo');
      
                                                  

Let's try it out. Clone this repository. Open it in Atom and create this basic HTML page, using only the methods you've learned. HINT: Know that the head tag itself can be very finniky, so create that statically (in HTML) and make the rest dynamically (with JS). Use Bootstrap helper classes to shorten your workload.

Alright, let's put all this stuff we've learned together:

• Write a program that prints on the page all numbers from 1 to 100. For multiples of three print “Fizz” instead of the number. For multiples of five print “Buzz” instead of the number. For numbers which are multiples of both three and five print “FizzBuzz”.

  What you'll need:

  • For loop
  • Modulo/modulus/modsy-whatsit
  • console.log()
  • createElement()
  • appendChild()
  • .innerText
  • if statements or switch statements(lots of ways to do the same thing!)

Write a program that does the following:

1. When the user clicks a button, prompt them for the a title.
2. Put that title into an h1 that is centered on the page.
3. Ask the user to write a few sentences about what they did today.
4. Populate a p tag with the sentences, align the p tag text with justify.
5. Finally, ask the user for his or her favorite color, and set the background of the p tag to that color
6. Remember, check for edge cases with color.