Блог

Главная - Вопросы по программированию - Создайте новый div элемента и оберните его вокруг существующего с помощью JavaScript

Создайте новый div элемента и оберните его вокруг существующего с помощью JavaScript

#javascript

Вопрос:

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

Могу ли я создать новый элемент и добавить в него существующий?

Например:

Я хотел бы взять текущий код ниже и поместить его в совершенно новый div.

 // Current elements on page
<div>
  <img />
  <img />
</div>
<div>
  <p>Hello world</p>
</div>

Чего я хочу:

 // What I want
<div class="my-new-div">
 <div>
  <img />
  <img />
 </div>
 <div>
  <p>Hello world</p>
 </div>
</div>

Однако я понимаю, что это легко сделать в HTML. В этом сценарии я должен использовать JavaScript для изменения веб-страницы. В этом сценарии я должен добавить родительский div, чтобы избежать изменения стилей.

Комментарии:

1. Это единственный HTML-код на странице? Нам нужен способ выбрать эти элементы DOM, чтобы обернуть их. Нам нужен способ ссылаться на элементы. Трудно придумать селектор, не зная структуры HTML-страницы.

2. plainjs.com/javascript/manipulation/…

Ответ №1:

Вы можете просто извлечь существующий узел, создать новый, вставить его перед существующим узлом и, наконец, добавить существующий узел к новому узлу в качестве дочернего. Браузер перемещает узел при выполнении операции «добавить», если он уже содержится где-то в документе.

 const myDiv = document.getElementById("myDiv");
const myNewDiv = document.createElement("div");
myNewDiv.style.border = "solid 1px";

document.body.insertBefore(myNewDiv, myDiv);
myNewDiv.appendChild(myDiv); 
 <div id="myDiv">
  <p>Hello</p>
  <p>Paragraph</p>
</div>

Ответ №2:

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

 function newAndMove() {

  //Create a new element
  let blue = document.createElement('DIV');
  blue.classList.add('blue-div');
  document.body.appendChild(blue);
  
  //Move existing element inside it
  let red = document.getElementById('old-div');  
  blue.appendChild(red);  
  
} 
 .red-div {
  width: 200px;
  height: 200px;
  background-color: red; 
}

.blue-div {
  width: 400px;
  height: 400px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100pxl
} 
 <input type="button" value="Get red inside new blue" onClick="newAndMove()">
<div class="red-div" id="old-div"></div>

вы можете перемещать элементы DOM, добавляя их как дочерние элементы в предпочтительный контейнер.

Метки: