https://stackoverflow.com/questions/63994797/how-can-i-create-html-tags-using-javascript
이 코드는 둘 이상의 파일에서 사용할 것이므로 JavaScript를 사용하여 생성하고 싶습니다. CSS와 함께 :after를 사용하려고 했지만 작동하지 않았습니다. 그런 다음 HTML 태그를 생성하기 위해 DOM 조작을 사용하는 것에 대해 생각했지만 완료할 수 없었습니다.
누구든지 나를 도와줄 수 있나요?
아래 이미지는 내가 달성하려는 것을 보여줍니다.
- 메인 div 태그
- 기본 div 태그 내의 div 태그
- JavaScript를 사용하여 만들고 싶은 div 태그
미리 감사드립니다.
도움을 주신 모든 분들께 감사드립니다. 귀하의 답변에서 얻은 내용은 다음과 같습니다.
//CREATE MENU DIVs
const mainbody = document.querySelector('body') //or target div
const divbtn = document.createElement('div');
divbtn.setAttribute('id','btn');
const img = document.createElement('img');
img.setAttribute('src', 'https://thiagoprado.com/demo/learning/overlay-menu.png');
img.setAttribute('id','menu');
img.style.display = "block";
const img2 = document.createElement('img');
img2.setAttribute('src', 'https://thiagoprado.com/demo/learning/close-menu.png');
img2.setAttribute('id','x');
img2.style.display = "none";
divbtn.appendChild(img);
divbtn.appendChild(img2);
//canvasDIV.appendChild(div);
document.getElementById("c2canvasdiv").appendChild(divbtn);
// second main DIV
const divbox = document.createElement('div');
divbox.setAttribute('id','box');
const divItems = document.createElement('div');
divItems.setAttribute('id','items');
const divItem = document.createElement('div');
divItem.setAttribute('class','item');
const divItem2 = document.createElement('div');
divItem2.setAttribute('class','item');
//divItem2.setAttribute('id','item2');
const link1 = document.createElement('a');
link1.setAttribute('href','https://thiagoprado.com/demo/learning/');
const img3 = document.createElement('img');
img3.setAttribute('src', 'https://thiagoprado.com/demo/learning/home-60x60.png');
const link2 = document.createElement('a');
link2.setAttribute('href','#');
const img4 = document.createElement('img');
img4.setAttribute('src', 'https://thiagoprado.com/demo/learning/logo-60x60.png');
divbox.appendChild(divItems);
divItems.appendChild(divItem);
divItem.appendChild(link1);
link1.appendChild(img3);
divItems.appendChild(divItem2);
divItem2.appendChild(link2);
link2.appendChild(img4);
document.getElementById("c2canvasdiv").appendChild(divbox);
<! --------------------자바 p페이지----------------------->
//CREATE MENU DIVs const mainbody = document.querySelector('body') //or target div const divbtn = document.createElement('div'); divbtn.setAttribute('id','btn'); const img = document.createElement('img'); img.setAttribute('src', 'https://thiagoprado.com/demo/learning/overlay-menu.png'); img.setAttribute('id','menu'); img.style.display = "block"; const img2 = document.createElement('img'); img2.setAttribute('src', 'https://thiagoprado.com/demo/learning/close-menu.png'); img2.setAttribute('id','x'); img2.style.display = "none"; divbtn.appendChild(img); divbtn.appendChild(img2); //canvasDIV.appendChild(div); document.getElementById("c2canvasdiv").appendChild(divbtn); // second main DIV const divbox = document.createElement('div'); divbox.setAttribute('id','box'); const divItems = document.createElement('div'); divItems.setAttribute('id','items'); const divItem = document.createElement('div'); divItem.setAttribute('class','item'); const divItem2 = document.createElement('div'); divItem2.setAttribute('class','item'); //divItem2.setAttribute('id','item2'); const link1 = document.createElement('a'); link1.setAttribute('href','https://thiagoprado.com/demo/learning/'); const img3 = document.createElement('img'); img3.setAttribute('src', 'https://thiagoprado.com/demo/learning/home-60x60.png'); const link2 = document.createElement('a'); link2.setAttribute('href','#'); const img4 = document.createElement('img'); img4.setAttribute('src', 'https://thiagoprado.com/demo/learning/logo-60x60.png'); divbox.appendChild(divItems); divItems.appendChild(divItem); divItem.appendChild(link1); link1.appendChild(img3); divItems.appendChild(divItem2); divItem2.appendChild(link2); link2.appendChild(img4); document.getElementById("c2canvasdiv").appendChild(divbox);