createElement(tag_type)

// 問題1. 子要素に段落を追加してください
// この下に解答してください
const parentElement = document.getElementById('parent')
const newChildParagraph = document.createElement('p')
newChildParagraph.textContent = '新しい子要素の段落テキスト'
parentElement.appendChild(newChildParagraph)


#parent {
  width: 500px;
  height: 60px;
  background-color: #87cefa;
  display: flex;
  align-items: center;
  justify-content: center;
}


// 問題1. 子要素に段落を追加してください
// この下に解答してください


子要素に段落を追加

document.getElementById()

element.textContent

~~~javascript
var element = $(1).getElementById($('2'));
element.textContent = $('3');
console.log(element.textContent);
~~~

要素のテキストを取得と変更

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

要素のスタイルを変更

要素の可視性を切り替え

【演習】ボタンの色や形を変えよう

element.appendChild(element)

子要素に特定の要素を追加

element.remove()

特定の要素を削除

element.removeChild()

子要素を削除

【総合問題】強調されたリストを追加しよう

DOMに関する基本的な操作から応用まで、Webページの動的な構築や修正ができるようになるコースです。
手を動かしながらWeb開発の一歩を踏み出しましょう。

「JavaScript DOM操作を体験しよう」レッスンの総復習クイズです。