【JavaScript】HTMLを生成

要素の追加、削除

document.querySelector('button').addEventListener('click', () => {
    const liElement = document.createElement('li'); // 要素を生成する命令
    liElement.textContent = 'Hanako';
    // 親要素の最後の子要素として追加
    document.querySelector('ul').appendChild(liElement);

    // 親要素の途中に追加する場合は、追加するノード、参照ノードの順で指定して追加できる
    // 下の場合は、liElement を document.querySelector('#second') の前に追加する
    document.querySelector('ul').insertBefore(
        liElement,
        document.querySelector('#second'));

    // 確認の上、要素を削除する場合
    if (confirm('削除して良いですか？') === true) {
        document.querySelector('#second').remove();
    }
});