Javascript DOMでul内のliをコピーして既存liの間にコピーを挿入する（要素の追加の処理）
前回の投稿の続きです
kirikko-scondcube.hatenablog.com
今回は既存のli要素item0をコピーしてitem2とitem1の間にコピーしたitem0を挿入する処理
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>run</button>
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
</ul>
<script src="js/main.js"></script>
</body>
</html>
js
`use strict`;
{
document.querySelector('button').addEventListener('click', ()=>{
const item0 = document.querySelectorAll('li')[0];
//ここでliタグの０番目の要素を定数化している
const copy = item0.cloneNode(true);
//ここでitem0に対し複製処理をしている(true)は中のテキストもコピーすることをさす。（false)だとテキストはコピーせず空要素のみコピーされる.つまり空のli要素が作られる。
const ul = document.querySelector('ul');
//定数ulにulの要素を設定
const item2 =document.querySelectorAll('li')[2];
//今回はitem1とitem2の間に複製したitem0を入れたいのでitem2を定数化し、指定できるようにしている。
ul.insertBefore(copy, item2);
//insertBeforeは２番目の引数の場所の上に1つ目の引数のnodeを挿入する。
//ここで挿入処理をするためにitem2を事前に定数化した
})
}
