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

Move form element up the DOM and have it wrap lower elements

本文关键字：元素 包装 DOM 表单 移动      更新时间：2023-09-26

我有下面的代码

<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（） 函数，但这创建了一个第二个表单元素，这不是我想要的。

非常感谢任何帮助

你可以

做类似的事情

$('.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>

是的，这是可能的！只需在表单 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

演示

演示 2（显示文档内部 html）

希望对:)有所帮助

相关文章：