javascript - div 操作

标签 javascript jquery html

<分区>

我有这个

<div class="out"> 
out asdaasd
<div class="in"> in </div>
out
</div>

并想做到这一点

<div class="out"> out asdaasd <div>
<div class="in"> in </div>
<div class="out"> out </div>

将任意文本从里到外,如何检测内部 div 的位置并获得我需要的内容?

最佳答案

var outers = document.getElementsByClassName("out");

[].forEach.call(outers, function(outer) {
    var inner = outer.getElementsByClassName("in")[0];
    var children = outer.childNodes;

    var flag = true;
    var before = document.createElement("div");
    var after = document.createElement("div");
    before.classList.add("out");
    after.classList.add("out");

    [].slice.call(children).forEach(function(node) {
        if (node == inner) {
            return flag = false;
        }
        if (flag) {
            before.appendChild(node);
        } else {
            after.appendChild(node);
        }
    });
    var frag = document.createDocumentFragment();
    frag.appendChild(before);
    frag.appendChild(inner);
    frag.appendChild(after);
    outer.parentNode.replaceChild(frag, outer);
});

Live Example

关于javascript - div 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8082824/

相关文章:

javascript - 限制用户输入新名称并仅允许从现有列表中进行选择

javascript - 在 Node.js 流中全程实现背压

javascript - 就浏览器兼容性而言,在 javascript 中使用 "let"?

Jquery 在 Office 选择输入中追加

javascript - 如果显示站点的替代版本则弹出

html - 如何在 Angular 中添加 bootstrap 5 模态

javascript - 处理 rxjs ajax.map 调用中的异常

javascript - 使用 jquery 提交表单,该表单有多个提交按钮而无需单击触发器?

html - FFmpeg 将#EXT-X-START 添加到 HLS m3u8 文件

javascript - 使用 html 中名称为 ="example"的值