Question

我在内容管理系统的限制下工作，有时会迫使我做一些奇怪的事情，因为我没有完全控制HTML代码。

在这种情况下，我有一种情况，我希望一个DIV不嵌套在另一个DIV中。由于CMS设置，我不能只在HTML代码中重新排序DIV。

所以，我有这个：

<div class="blog">
   <div class="free-me">
      Hello world
   </div>
</div>

我需要的是：

<div class="blog">
</div>
<div class="free-me">
   Hello world
</div>
<div class="blog">
</div>

如果我可以访问HTML，这就像复制和粘贴一些行一样简单。但是，由于我不能只改变HTML，我想知道的是，有什么方法可以使用CSS或JavaScript来关闭blog DIV，以便free-me可以成为兄弟姐妹。

我试过这个（即使我知道它不起作用）：

.free-me::before {
    content: '</div>';
}

正如所怀疑的那样，只是将</div>文本呈现在页面中。

对于JavaScript，我当然不是专家，但似乎你只能使用像document.createElement('div');之类的命令插入带有开始和结束标记的完整元素我看不清楚现有的DIV并关闭它。

有没有办法，无论是使用CSS还是JavaScript，我都可以强制DIV关闭或插入结尾</div>代码？

注意：最好是非jQuery解决方案。

Answer 1

如果您只想在渲染后从另一个div中弹出一个div，我建议您使用 jQuery insertAfter 方法。我也使用CMS并确切地知道你的感受。

$(".free-me").insertAfter(".blog");

.blog {
  border: 1px solid red;
  width: 100px;
  height: 20px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="blog">
  <div class="free-me">
    Hello world
  </div>
</div>

Answer 2

您可以通过使用类名.free-me循环遍历所有元素并在其父元素之前插入DOM来实现此目的。下一个兄弟姐妹，也会同时将它们从父元素中移除。

＆＃13;

(function(){
    var children=document.querySelectorAll(".blog>.free-me"),
        x=children.length,
        child,parent;
    while(x--){
        child=children[x];
        parent=child.parentNode;
        // Uncomment below if you would prefer to
        // explicitly remove the child from the parent.
        //parent.removeChild(child);
        parent.parentNode.insertBefore(child,parent.nextSibling);
    }
})();

＆＃13;

div{
    margin:5px;
    padding:10px;
}
.blog{
    background:#000;
}
.free-me{
    background:#090;
}
.ignore-me{
    background:#f00;
}

＆＃13;

<div class="free-me"></div>
<div class="blog"></div>
<div class="blog">
    <div class="free-me"></div>
</div>
<div class="blog">
    <div class="free-me"></div>
    <div class="free-me"></div>
</div>
<div class="blog">
    <div class="free-me"></div>
    <div class="ignore-me"></div>
    <div class="free-me"></div>
    <div class="free-me"></div>
</div>

＆＃13;

但是，如果您的父元素包含多个子元素，其中一些子元素将具有.free-me类，而其中一些元素不会被激活，并且您希望维护所有子元素的顺序，那么解决方案是稍微复杂一点（注意：这个片段有点匆忙，所以可能会被清理干净。）

＆＃13;

(function(){
    var blogs=document.querySelectorAll(".blog"),
        x=blogs.length,
        grandparent,parent,clone,children,child,y;
    while(x--){
        parent=blogs[x];
        // You can remove the following if statement
        // if you wish to have any pre-existing empty .blog
        // elements removed from the DOM.
        if(parent.querySelector(".free-me")){
            grandparent=parent.parentNode;
            children=parent.children;
            y=children.length;
            while(y--){
                child=children[y];
                if(child.classList.contains("free-me")){
                    if(clone){
                        grandparent.insertBefore(clone,parent.nextSibling)
                        clone=0;
                    }
                    grandparent.insertBefore(child,parent.nextSibling);
                }else{
                    if(!clone)
                        clone=parent.cloneNode(0);
                    clone.insertBefore(child,clone.firstChild);
                }
            }
            grandparent.removeChild(parent);
        }
    }
})();

＆＃13;

div{
    margin:5px;
    padding:10px;
}
.blog{
    background:#000;
}
.free-me{
    background:#090;
}
.ignore-me{
    background:#f00;
}

＆＃13;

<div class="free-me">1</div>
<div class="blog"></div>
<div class="blog">
    <div class="free-me">2</div>
</div>
<div class="blog">
    <div class="free-me">3</div>
    <div class="free-me">4</div>
</div>
<div class="blog">
    <div class="free-me">5</div>
    <div class="ignore-me">6</div>
    <div class="ignore-me">7</div>
    <div class="free-me">8</div>
</div>
<div class="blog">
    <div class="ignore-me">9</div>
    <div class="free-me">10</div>
    <div class="ignore-me">11</div>
    <div class="free-me">12</div>
</div>
<div class="blog">
    <div class="ignore-me">13</div>
</div>

＆＃13;

Answer 3

您无法使用JavaScript添加结束标记。但是，您可以使用JavaScript在DOM中移动元素。

假设您想要围绕“free-me”div分割博客内容，这里是vanilla JavaScript解决方案（可能无法在lame-a **浏览器中使用）：

document.addEventListener("DOMContentLoaded", function() {
  var oldBlog = document.querySelector(".blog");
  var newBlog = document.createElement("div");
  var refNode = oldBlog.querySelector(".free-me");

  // move items after ref node from old blog to new blog
  while (refNode.nextSibling) {
    newBlog.appendChild(refNode.nextSibling);
  }

  // move ref node after old blog
  oldBlog.parentNode.insertBefore(refNode, oldBlog.nextSibling);

  // move new blog after ref node
  refNode.parentNode.insertBefore(newBlog, refNode.nextSibling);

  // set class name
  newBlog.className = "blog";
});

<div class="blog">
  Above
  <div>Above</div>
  <!-- Above -->
  <div class="free-me">Hello world</div>
  Below
  <div>Below</div>
  <!-- Below -->
</div>

这将生成以下DOM：

<div class="blog">
  Above
  <div>Above</div>
  <!-- Above -->
</div>
<div class="free-me">Hello world</div>
<div class="blog">
  Below
  <div>Below</div>
  <!-- Below -->
</div>

如果您尝试在内容中插入广告，请注意：使用此技巧在DOM内移动iframe会强制重新加载;这可能会增加广告展示次数。

我可以使用JavaScript或CSS来关闭之前的div吗？

3 个答案: