Как я могу вставить существующие элементы в динамически созданный элемент с помощью JavaScript?

Question

Я хочу добавить основной DIV вне отдельного много DIV с помощью CSS, поэтому я могу контролировать весь 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>

Но я хочу сделать это с помощью CSS только потому, что HTML часть исходит от третьей стороны, поэтому я не могу добавить или изменить что-либо в HTML. Но я могу редактировать CSS.

Спасибо заранее, :) краны

Answer 1

Вы не можете придать любую разметку с помощью CSS. CSS это язык стилей, используемое для документов, написанных в стиле HTML

Однако, вы можете создать новый элемент DIV, добавьте его на свою страницу, а затем вставить существующие Дивы элементы в него с помощью JavaScript.

Вот как:

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') выбирает все дивы на этой странице. Вам нужно будет сделать это более конкретным для вашего дела, например. document.querySelectorAll('div.myClass')