добавить новый контейнер div к идентификатору контейнера div с помощью jQuery

Question

Было бы очень легко встроить недостающий контейнер div в html ... если бы я только мог его добавить. Я ограничен областью головы "jimdo", чтобы управлять классами и идентификаторами оттуда. Код уже написан, но мне кажется, что единственный способ, который работает, - это сделать это с помощью jQuery или Javascript?

Итак, у меня здесь код:

<div id="1" class="2">

  <div class="3"></div>

  <div class="4"></div>

  <div class="5"></div>
</div>

И недостающий контейнер div в html <div class="margin"> должен находиться под первым контейнером div сверху <div id="1" class="2">, добавленным его идентификатором #1, а затем окружает остальной код ниже в новый добавленный <div class="margin">

Вот так:

<div id="1" class="2">

  <div class="margin">

    <div class="3"></div>

    <div class="4"></div>

    <div class="5"></div>
  </div>
</div>

Можно ли так добавить с помощью jQuery или javascript? Если да, может быть, кто-нибудь покажет мне, как это реализовать?

Мой настоящий код проблемы выглядит так:

Answer 1

jQuery .wrapAll должен делать то, что вы хотите:

$(document).ready(function() {
  $('#cc-m-7032876518').children().wrapAll('<div class="margin">');
});

.margin {
  background-color: lightskyblue
}

Answer 2

Вы можете использовать функцию wrapAll в jQuery. Do c ссылка

<style> .margin { background: blue; }</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="1" class="2">

  <div class="3">3</div>

  <div class="4">4</div>

  <div class="5">5</div>
</div>

<script>
  $("#1").children().wrapAll("<div class=\"margin\"></div>");
</script>

Answer 3

Я должен начать говорить, что использовать номер для ID и classNames неправильно. Согласно W3 C spe c, оба атрибута должны начинаться с символа, подчеркивания или дефиса.

они не могут начинаться с di git или дефис, за которым следует di git.

Но правда в том, что ваш браузер сделает все возможное, чтобы справиться с этим, и, возможно, он go останется незамеченным (однако он может сломаться, когда клиент посетит page)

(Я только что видел, что ваш настоящий HTML имеет действительные идентификаторы и имена классов, но мой комментарий все еще действителен; D)

---

При этом:

jQuery имеет несколько удобных методов, чтобы сделать именно это, но в основном вы должны создать контейнер "margin", получить ссылку на самые внешние элементы div прямые дочерние элементы , добавить их в контейнер полей, а затем добавить последний к исходной обертке:

$('#wrap_with_div').on('click', () => {
  let wrapper = $('<div class="margin">'), //
    children = $('#id1 > div').each(function() {
      $(this).appendTo(margin);
    });


  wrapper.appendTo('#id1');
});

Посмотреть в действии

$('#wrap_with_div').on('click', () => {
  const outerMost = $('#id1'),
    wrapper = $('<div>'),
    children = $('#id1 > div').each(function() {
      $(this).appendTo(wrapper);
    });

  wrapper.addClass('margin');
  outerMost.append(wrapper);
});

.child3,
.child4,
.child5 {
  width: 100px;
  height: 20px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  float: left;
  margin: 10px;
}

#id1 {
  padding: 10px;
  border: 1px solid #369;
  float: left;
}

#wrap_with_div {
  display: block;
  clear: both;
}

.margin {
  border: 1px dashed green;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id1" class="container2">



  <div class="child3"></div>

  <div class="child4"></div>

  <div class="child5"></div>

</div>
<button id="wrap_with_div">Click to wrap inner containers</button>

---

однако ...

Зачем вам jQuery для этого? Это просто вопрос создания div, захвата других, добавления и повторного добавления. В настоящее время в DOM есть краткие способы сделать то же самое без включения внешних библиотек.

document.querySelector('#wrap_with_div').addEventListener('click', () => {
  const outermost = document.querySelector('#id1'),
    wrapper = document.createElement('div'),
    children = document.querySelectorAll('#id1 > div').forEach(child => {
      wrapper.appendChild(child);
    });
  wrapper.classList.add('margin');
  outermost.appendChild(wrapper);
});

document.querySelector("#wrap_with_div").addEventListener("click", () => {
  const outermost = document.querySelector("#id1"),
    wrapper = document.createElement("div"),
    children = document.querySelectorAll("#id1 > div").forEach(child => {
      wrapper.appendChild(child);
    });
  wrapper.classList.add("margin");
  outermost.appendChild(wrapper);
});

.child3,
.child4,
.child5 {
  width: 100px;
  height: 20px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  float: left;
  margin: 10px;
}

#id1 {
  padding: 10px;
  border: 1px solid #369;
  float: left;
}

#wrap_with_div {
  display: block;
  clear: both;
}

.margin {
  border: 1px dashed green;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id1" class="container2">



  <div class="child3"></div>

  <div class="child4"></div>

  <div class="child5"></div>

</div>
<button id="wrap_with_div">Click to wrap inner containers</button>

Answer 4

Абсолютно возможно - здесь есть хорошие ответы; даже демонстрация примеров с IE support Pure javascript методом обертывания содержимого в div

<script>
    let org_html = document.getElementById("1").innerHTML;
    let new_html = "<div class='maargin'>" + org_html + "</div>";
    document.getElementById("1").innerHTML = new_html;
</script>