DOM操作
///parent内のHTMLを取得します
parent.innerHTML
///parent内のテキストを取得します
parent.textContent
///parentにex属性を
parent.setAttribute('ex',);
テキストを挿入したい場合
例として以下のHTMLを用意する。
<body>
<ul id="ul">
<li id="first">1</li>
<li id="second">2</li>
<li id="third">3</li>
</ul>
<script src="./main.js"></script>
</body>
///parent内の一番下にnodeを挿入。
parent.appendChild(node)
parent.append(node)
///parent内のnextの前にnodeを挿入。
parent.insertBefore(node, next)
parent.prepend(node)
///parentの前にnodeを挿入。
parend.before(node)
///parentの後にnodeを挿入。
///parentの閉じタグの次にnodeを挿入。
parent.after(node)
上記のメソッドを使用して、下の画像を実装。
insertBeforeとappendChildを使用
let p = document.createElement('p');
let before = document.createTextNode('before');
p = before;
document.body.insertBefore(p,ul);
let append = document.createTextNode('append');
p = append;
ul.appendChild(p);
let prepend = document.createTextNode('prepend');
p = prepend;
ul.insertBefore(p,first);
let after = document.createTextNode('after');
p = after;
document.body.appendChild(p);
append,before,append,prependを使用した場合
let p = document.createElement('p');
let before = document.createTextNode('before');
p = before;
ul.before(p);
let append = document.createTextNode('append');
p = append;
ul.append(p);
let prepend = document.createTextNode('prepend');
p = prepend;
ul.prepend(p);
let after = document.createTextNode('after');
p = after;
ul.after(p);
後者の方が簡潔で直感的にかけるため、おすすめ。
HTMLタグを挿入したい場合
parent.innerHTML(HTML)
要素内のHTMLを丸ごと入れ替える。
要素内を書き換えたい時に使用。
///parentのタグの直前にHTMLを挿入
parent.insertAdjacentHTML('beforebegin', HTML)
///parentのタグの直後にHTMLを挿入
parent.insertAdjacentHTML('afterbegin', HTML)
///parentの閉じタグの直前にHTMLを挿入
parent.insertAdjacentHTML('beforeend', HTML)
///parentの閉じタグの直後にHTMLを挿入
parent.insertAdjacentHTML('afterend', HTML)
parentを軸として、指定した場所にHTMLを挿入する。
let before = `<p>before</p>`
ul.insertAdjacentHTML('beforebegin', before);
let append = `<p>append</p>`;
ul.insertAdjacentHTML('afterbegin', append);
let prepend = `<p>prepend</p>`
ul.insertAdjacentHTML('beforeend', prepend);
let after = `<p>after</p>`
ul.insertAdjacentHTML('afterend', after);
要素をコピーする
///parentをコピーする。
parent.cloneNode(true)
要素を削除する
///parentからnodeを削除する
parent.removeChild(node)
///nodeを削除する
node.remove()
クラスを変更、追加、削除する
///クラスをexに上書きする
parent.className = "ex";
///exを追加する
parent.classList.add('ex');
///exを削除する
parent.classList.remove('ex');
///exを付け外しする
parent.classList.toggle('ex');