Published
Edited
May 21, 2019
1 fork
md`# DOM API로 element만들어서 추가해보기
<br>`
doc1 = html``
{
doc1.innerHTML = "<div id='parent'>"
+ "<span>1111</span>"
+ "<span>2222</span>"
+ "<span>3333</span>"
+"</div>"
+"<div id='parent2'>"
+ "<span>aaaa</span>"
+ "<span>bbbb</span>"
+ "<span>cccc</span>"
+"</div>";
let newOl = document.createElement("ol"); // 아무것도 안들어있음
let li1 = document.createElement("li");
li1.textContent = "첫번째 리스트 아이템";
let li2 = document.createElement("li");
li2.textContent = "두번째 리스트 아이템";
newOl.appendChild(li1); // li1을 newOL의 마지막 자녀로 추가
newOl.appendChild(li2); // li1를 newOL의 마지막 자녀로 추가
let parent = document.querySelector("#parent");
parent.appendChild(newOl);
// let newOl2 = newOl.cloneNode(); // 맨 위에 ol 만 복사되고 내용은x
// let newOl2 = newOl.cloneNode(false); // 요거랑 위에 줄이랑 같음
let newOl2 = newOl.cloneNode(true); // ol과 그 안의 내용도 복사
/* // 아래처럼 똑같은 내용을 다시 반복해 새로 만드는 대신 cloneNode를 사용하면 된다
let newOl2 = document.createElement("ol"); // 아무것도 안들어있음
let li1_2 = document.createElement("li");
li1_2.textContent = "첫번째 리스트 아이템";
let li2_2 = document.createElement("li");
li2_2.textContent = "두번째 리스트 아이템";
newOl2.appendChild(li1_2); // li1을 newOL의 마지막 자녀로 추가
newOl2.appendChild(li2_2); // li1를 newOL의 마지막 자녀로 추가
*/
let parent2 = document.querySelector("#parent2");
parent2.appendChild(newOl2);
//
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
