Question

我有以下代码

<div class="wrapper-div">
  <div class="div-1">
    <form class="form-1">
      <input class="input-1" />
    </form>
  </div>
  <div class="div-2"></div>
</div>

我需要使用表单元素并包装div-1和div-2，如下所示

<div class="wrapper-div">
  <form class="form-1">
    <div class="div-1">
      <input class="input-1" />
    </div>
    <div class="div-2"></div>
  </form>
</div>

我无法编辑html因此可以通过jquery执行此操作吗？我尝试过使用wrap（）函数，但是这会创建第二个表单元素，而不是我想要的。

非常感谢您的帮助

Answer 1

您可以执行类似

的操作

$('.wrapper-div').each(function() {
  var $frm = $(this).find('form');
  $frm.contents().unwrap();
  $(this).wrapInner($frm)
})

div,
form {
  padding: 5px;
}
.wrapper-div {
  border: 1px solid red;
}
form {
  border: 1px solid green;
}
.div-1,
.div-2 {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper-div">
  <div class="div-1">
    <form class="form-1">
      <input class="input-1" />
    </form>
  </div>
  <div class="div-2"></div>
</div>

Answer 2

是的，这是可能的！只需在form-1中创建新元素，复制div-2内容并将其粘贴到新元素。然后，删除div-2。例如：

var elem = document.getElementsByClassName('div-2')[0];
var elem_html = elem.innerHTML;

var new_elem = document.createElement("div"); //create element
new_elem.className = "div-2";
new_elem.innerHTML = elem_html; // set attributes and inner html

document.getElementsByClassName("form-1")[0].appendChild(new_elem); //copy it
elem.remove(); //remove the div

<强> Demo

Demo 2 （显示文档内部html）

希望它会有所帮助：）

将表单元素向上移动到DOM并使其包含较低的元素

2 个答案: