4/4 Javascriptコードレシピ集 replaceWith textContent

replaceWith

旧ノードと新ノードを入れ替える
旧ノード.replaceWith(新ノード)

js

// 旧ノードを取得
const disappearBox = document.querySelector('.disappear');

// disappearをクリックした時に発火
disappearBox = addEventListener('click', () =>
{
  // .disappearがクリックされたらdiv要素を作成
  // createElement(作成する要素)
  const appearBox = document.createElement('div');

  // div要素にテキストを追加
  appearBox.textContent = '新しいBOX';

  // div要素にクラスを追加
  // 対象の要素.classList.add(追加したいクラス)
  appearBox.classList.add('new-box', 'new');

  // disapperBoxとappearBoxを入れ替える
  disappearBox.replaceWith(appearBox);
});

html

<div class=.disappear>置き換わります</div>

textContent

要素内のテキストの取得・更新を行う
対象要素.textContent

js

// アラートでlanka要素のテキストを表示する
const lanka = document.querySelector('#lanka');
alert(lanka.textContent);

html

<div class="lanka">アーユボーワン</div>