子附加/ DOM排序JavaScript

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只包装类“ order-2-a” +作为“ class-1-a”的第一个孩子，我应该如何用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 个解决方案

解决方案1
1 2018-01-21 22:49:04

解决方案2
0 2018-01-21 22:58:05

子附加/ DOM排序JavaScript

问题描述

2 个解决方案

解决方案1 1 2018-01-21 22:49:04

解决方案2 0 2018-01-21 22:58:05

解决方案1
1 2018-01-21 22:49:04

解决方案2
0 2018-01-21 22:58:05