主页 / 问题 / 971620
Accepted
John
Asked:2020-04-19 18:58:14 +0000 UTC2020-04-19 18:58:14 +0000 UTC

在这个例子中如何使用 js 包装一个 div 元素

  • 772

任务： 有一个节点

<div class = "child">
        Lorem ipsum dolor.
    </div>

单击此元素时，DOM树应包裹该元素

结果：

<div class = "parent">
   <div class = "child">
            Lorem ipsum dolor.
    </div>
</div>

资源：

 let child = document.querySelector("child");
 let parent = document.createElement("div");

child.onclick = function(){

    // 
}
javascript

4 个回答

  1. 这是另一种选择。

    var child = document.querySelector('.child');

child.addEventListener('click', function() {
  const oldParent = child.parentNode;
  var parent = document.createElement('div');
  parent.classList.add('parent');
  oldParent.replaceChild(parent, child);
  parent.appendChild(child);
});
    .child {
  background-color: yellow;
}

.parent .child {
  background-color: red;
}
    <div class="child">
  Lorem ipsum dolor.
</div>

    • 1
  2. Best Answer

    var child = document.querySelector('.child');

child.addEventListener('click', () => {
  var wrapper = document.createElement('div');
  wrapper.classList.add('parent');
  wrapper.innerHTML = child.outerHTML;
  child.parentNode.replaceChild(wrapper, child);
});
    <div class="child">
  Lorem ipsum dolor.
</div>

    • 0

  3. 它就是这样出现的。

    let child = document.getElementsByClassName("child")[0];

child.addEventListener('click', () => {
  if(document.getElementsByClassName("parent").length > 0) return;
  let parent = document.createElement("div");
  parent.classList.add('parent');
  parent.appendChild(child);
  document.body.appendChild(parent);
});
    .parent {
  position: relative;
  background-color: red;
  width: 200px;
  height: 200px;
  z-index: 5;
}

.child {
  position: relative;
  background-color: green;
  width: 100px;
  height: 100px;
  z-index: 10;
}
    <div class="child">
  Lorem ipsum dolor.
</div>

    • 0

  4. 在我看来，最合乎逻辑的操作顺序是先放在..parent之前.child，然后移动.child.

    const el = document.querySelector('.child'); 
el.addEventListener('click', function () {
  const wrapper = document.createElement('div'); 
  wrapper.classList.add('parent'); 
  this.parentElement.insertBefore(wrapper, this); 
  wrapper.appendChild(this); 
}, { once: true }); 
    .parent { padding: 0.5rem; border: 1px solid #d44; }
.child { border: 1px solid #000; }
    <div class="child">
  Lorem ipsum dolor.
</div>

    • 0

相关问题