Question

<body>
    <div class = "order-1-a">
        <div class = "order 2-a">
            <div class = "order 3-a"></div>
        </div>
        <div class = "order 2-b"></div>
        <div class = "order 2-c"></div>
        <div class = "order 2-d"></div>
    </div>
    <div class = "order-1-b"></div>
</body>

如果我想要一个div只包装类＆＃34; order-2-a＆＃34; +作为＆＃34; class-1-a＆＃34;的第一个孩子，我应该如何用JavaScript编写div？

Answer 1

可能你最好的选择是：

使用 .createElement() 创建新元素。
使用 .appendChild() 将2-a附加到新元素。
使用 .insertBefore() 在2b之前插入新元素。

var one_a = document.getElementsByClassName("order-1-a")[0];
var two_a = document.getElementsByClassName("order-2-a")[0];
var two_b = document.getElementsByClassName("order-2-b")[0];
var new_node = document.createElement("div");

new_node.appendChild(two_a);
one_a.insertBefore(new_node, two_b);

console.log(one_a.innerHTML);

<body>
  <div class="order-1-a">
    <div class="order-2-a">
      <div class="order-3-a"></div>
    </div>
    <div class="order-2-b"></div>
    <div class="order-2-c"></div>
    <div class="order-2-d"></div>
  </div>
  <div class="order-1-b"></div>
</body>

这提供了您正在寻找的结构（虽然console.log()没有很好地显示）。

另外，请注意，类名不能以数字开头，并且可能会产生意外结果。我已经更新了您的大多数课程，以便在我的示例中使用order，就像您的order-1-a课程一样。

希望这有帮助！

Answer 2

您可以基于选择器创建常规包装功能。它应该获取主题节点，然后是它的父节点，或者它是下一个兄弟节点，如果没有节点，则为null。

然后创建一个所需类型的元素，追加主题节点并在下一个兄弟节点之前插入它，或者如果没有节点则作为最后一个节点插入。

PS。我已经将类名修改为有效，它们不能以数字开头。

// Wrap element with selector in element with tagName
function wrapEl(selector, tagName) {
  var node = document.querySelector(selector);

  // If there is no subject node, return
  if (!node) return;

  // Get parent and sibling (or null if there isn't one)
  var parent = node.parentNode;
  var sibling = node.nextSibling;

  // Append stuff
  var wrapper = document.createElement('tagName');
  wrapper.textContent = 'inserted wrapper'; // Just to show it's there
  wrapper.appendChild(node);
  parent.insertBefore(wrapper, sibling);
}

window.onload = function() {
  wrapEl('.order-2-a', 'div');
}

<body>
    <div class = "order-1-a">
        <div class = "order-2-a">
            <div class = "order-3-a"></div>
        </div>
        <div class = "order-2-b"></div>
        <div class = "order 2-c"></div>
        <div class = "order 2-d"></div>
    </div>
    <div class = "order-1-b"></div>
</body>

子追加/ DOM订购JavaScript

2 个答案: