100DaysOfCode - Day 22 DOM

100DaysOfCode · 23 Dec 2020

Lesson learned: learn the correct posture to code before coding.

My right has hurt for weeks. Luckily, it’s not my dominant hand, so it doesn’t bother me that much. However, I need both hands to code. I’ll try to rest more to see if it recovers. If not, I’ll need to go the doctor.

Today I review the concept of DOM. I read DOM manipulation and Day03-深入理解網頁架構：DOM and I do an exercise from DOM manipulation.

I use appendChild, createElement, setAttribute, textContent and querySelector in this practice to alter my DOM.

As I’m doing the exercise, I learn the difference between textContent and innerHTML. What’s Best: innerText vs. innerHTML vs. textContent and innerText、innerHTML、textContent、outerHTML 的差別.

This is my project: Day22_DOM and my code

const container = document.querySelector('#container');

const p1 = document.createElement('p');
p1.style.cssText = 'color: red';
p1.textContent = "Hey I’m red!";

const h3 = document.createElement('h3');
h3.style.cssText = 'color:blue';
h3.textContent = "I’m a blue h3!";

container.appendChild(p1);
container.appendChild(h3);

const blackDiv = document.createElement('div');
blackDiv.setAttribute('style', 'color: black; background: pink');

const h1 = document.createElement('h1');
h1.textContent = "I’m in a div";

const p2 = document.createElement('p');
p2.textContent = "ME TOO!";
blackDiv.appendChild(h1);
blackDiv.appendChild(p2);

container.appendChild(blackDiv);