JavaScript를 사용하여 동적으로 생성 된 요소에 기존 요소를 삽입하려면 어떻게해야합니까?

Question

CSS를 사용하여 개인 DIV 이외의 주 DIV를 추가하고 싶기 때문에 ID로 전체 DIV를 제어 할 수 있습니다.

<div class="div 1">div 1</div> 
 
<div class="div 2">div 2</div> 
 
<div class="div 3">div 3</div> 
 
<div class="div 4">div 4</div> 
 
<div class="div 5">div 5</div> 
 

 
I want to like this way: 
 

 
<div id="myId"> 
 
    <div class="div 1">div 1</div> 
 
    <div class="div 2">div 2</div> 
 
    <div class="div 3">div 3</div> 
 
    <div class="div 4">div 4</div> 
 
    <div class="div 5">div 5</div> 
 
</div>

는하지만 html로 일부가 제 3 자로부터오고있다 때문 CSS하여이 작업을 수행하려면, 그래서 편집하거나 HTML에 아무것도 추가 할 수 없습니다. 하지만 CSS로 편집 할 수 있습니다.

미리 감사드립니다. :) 탭

Answer 1

CSS를 통해 마크 업을 삽입 할 수 없습니다. CSS, 당신은 다음 자바 스크립트를 사용으로 기존의 DIV 요소를 삽입, 새로운 div 요소를 만들어 페이지에 추가 할 수 있습니다

그러나 HTML로 작성된 스타일 문서에 사용되는 스타일 시트 언어입니다. 이 원하는 마크 업에서 발생합니다

var div = document.createElement('div'), 
    divs = document.querySelectorAll('div'), 
    len = divs.length, 
    i; 

// Set any necessary attributes 
div.id = "myDiv"; 

for(i = 0; i < len; i++) { 
    div.appendChild(divs[i]); 
} 

document.body.appendChild(div); 

:

방법은 다음과

<div id="myDiv"> 
    <div class="div 1">div 1</div> 
    <div class="div 2">div 2</div> 
    <div class="div 3">div 3</div> 
    <div class="div 4">div 4</div> 
    <div class="div 5">div 5</div> 
</div> 

는 document.querySelectorAll('div') 페이지에 어떤 된 div를 선택 있습니다. 귀하의 사례와 관련하여보다 구체적으로 작성해야합니다 (예 : document.querySelectorAll('div.myClass')