Question

有一个代码：

<blockquote>1</blockquote>   
<p>1</p>
<p>2</p>
<p>2</p>
<figure>12</figure>
<pre></pre>

但我希望成为

<blockquote>1</blockquote>
<div>
   <p>1</p>
   <p>2</p>
   <p>2</p>
</div>
<figure>12</figure>
<pre></pre>

我不知道如何通过操纵房屋来做到这一点。现在，如果您可以首先添加

并在段落结束时-添加

。但是分配给这些标签的事件将停止工作

Answer 1

不要将其作为HTML进行操作，只需直接操作DOM元素即可。

创建DIV，然后使用appendChild()将段落移入其中。

var div = document.createElement("div");
var pars = document.querySelectorAll("p");
pars.forEach(p => div.appendChild(p));
var figure = document.querySelector("figure");
figure.parentNode.insertBefore(div, figure);

div {
  background-color: yellow;
}

<blockquote>1</blockquote>
<p>1</p>
<p>2</p>
<p>2</p>
<figure>12</figure>
<pre></pre>

如果您使用jQuery，则可以编写：

$("p").wrapAll("<div>");

Answer 2

完成！）

    var stopElements = [...document.querySelectorAll("pre,figure,blockquote")];

    var isP = (el) => el.nodeName === "P"

    Element.prototype.insertAfter = (elem, refElem) => {
        var parent = refElem.parentNode;
        var next = refElem.nextSibling;
        if (next) {
            return parent.insertBefore(elem, next);
        } else {
            return parent.appendChild(elem);
        }
    }

    stopElements.forEach(el => {
        var div = document.createElement("div");
        var arrBlock = []
        console.log(el.nodeName)
        while (true) {
            var tecP = arrBlock.length ? arrBlock[arrBlock.length - 1] : el

            var p = tecP.nextElementSibling

            // console.log(tecP.nodeName, p.nodeName)

            if (p && isP(p)) { arrBlock.push(p); } else { break; }
        }
        console.log(' ', arrBlock.length)

        arrBlock.forEach(p => div.appendChild(p));

        el.parentNode.insertAfter(div, el);
    })

如何在<div>中换行

2 个答案: