DOM
要素の操作
サーチ…
要素のクローニング
要素は、その要素上でcloneNodeメソッドを呼び出すことによって複製できます。 cloneNode渡された最初のパラメータがtrue 、元の子も複製されます。
var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);
要素の追加
この例では、テキスト "new text"で新しいリスト要素を作成し、最初の順序付けられていないリストとその最初のリスト要素を選択します。
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
要素を挿入するとき、それは親要素の下で 、その親要素の特定の子要素の直前で行います。
parentElement.insertBefore(newElement, nextSibling);
新しい要素は
parentElement下、nextSibling直前に挿入されます。
parentElement最後の子要素として要素を挿入する場合、2番目の引数はnull parentElementん。
parentElement.insertBefore(newElement, null);
新しい要素は、最後の子として
parentElement下に挿入されます。
代わりに、 appendChild()を使用して、親ノードの子に子を単純に追加することができます。
parentElement.appendChild(newElement);
新しい要素は、最後の子として
parentElement下に挿入されます。
要素の置換
この例では、テキスト "new text"で新しいリスト要素を作成し、最初の順序付けられていないリストとその最初のリスト要素を選択します。
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
要素を置き換えるにはreplaceChildを使います：
parentElement.replaceChild(newElement, nextSibling);
nextSiblingはDOMから削除されます。その代わりにnewElement。
要素の削除
要素はremove()を呼び出すことで削除できます。あるいは、その親に対してremoveChild()を呼び出すこともできます。 removeChild()はremove()よりもブラウザのサポートが優れています。
element.remove();
element、およびすべての子ノードは、DOMから削除されます。
parentElement.removeChild(element);
element、およびすべての子ノードは、DOMから削除されます。
いずれの場合でも、このノードへの参照がまだ存在する限り、後でこのノードをDOMに挿入できます。
追加およびプリペンドメソッド
JavaScriptには、jQueryに存在するAppendメソッドとPrependメソッドが追加されました
appendとprependの主な利点は、 appendChildとinsertBeforeとは異なり、HTML要素またはプレーンテキスト（テキストノードに変換される）のいずれかの引数を取ることができます。
1 div、1テキストノード、1スパンを追加する
document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))
これにより、ページが次の構造に変更されます
<body>
.....(other elements)
<div></div>
"Hello World"
<span></span>
</body>
体の中に前置するには
つかいます
document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))
これにより、ページが次の構造に変更されます
<body>
<div></div>
"Hello World"
<span></span>
.....(other elements)
</body>
ブラウザのサポートは
Chrome 54+
Firefox 49+
Opera 39+
MDNで詳細を読む
