使用javascript手动放置div开始和结束标签

Question

我使用 Madcap Flare 来编写 Web 帮助。它带有有用的代理，可以在构建时自动生成导航。我需要操纵这些代理之一。这很重要，因为我必须在他们使用的结构内工作，而不能像往常一样在 html 中添加我的 div。

请注意：在这种情况下我无法直接更改 html。我只能添加 css 或 javascript。

所以问题来了。我需要在

<div class="eplanation-wrapper">

之前添加

<p class="explanation-heading">

，并且在最后一个

</div>

之后关闭

<p class="explanation-item">

。

我已经让选择器正常工作并将插入内容放置在正确的位置，但它们注册为字符串，而不是代码。

（其他标题/项目类配对将得到相同的处理）

<div class="MCRelationshipsProxy_0">
    <p class="explanation-heading">Related Articles</p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="howTo-heading">How To Guides</p>
    <p class="howTo-item"><a href="">link</a></p>
    <p class="reference-headaing">Reference Articles</p>
    <p class="reference-item"><a href="">link</a></p>
</div>

<script>
    const explanationHeading = document.querySelector('p.explanation-heading');
    explanationHeading.before('<div class="explanation-wrapper">');

    const explanationItem = document.querySelectorAll('p.explanation-item');
    const lastExplanationItem = explanationItem[explanationItem.length - 1];
    lastExplanationItem.after('</div>');
</script>

当前破损状态： 当前破损状态

目标：

<div class="MCRelationshipsProxy_0">
    <div class="explanation-wrapper"><p class="explanation-heading">Related Articles</p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p></div>
    <p class="howTo-heading">How To Guides</p>
    <p class="howTo-item"><a href="">link</a></p>
    <p class="reference-headaing">Reference Articles</p>
    <p class="reference-item"><a href="">link</a></p>
</div>

我已经尝试过：

before() after()

prepend() append()

insertAdjacentHTML(beforebegin / afterend)

insertAdjacentText(beforebegin / afterend)

Answer 1

这是一种方法：

const explanationWrapper = document.createElement("div");

explanationWrapper.setAttribute("class","eplanation-wrapper");

document.querySelectorAll(".explanation-heading, .explanation-item").forEach( el =>{
  explanationWrapper.appendChild(el);
})


document.querySelector(".MCRelationshipsProxy_0")
.insertAdjacentElement("afterbegin",explanationWrapper);

Answer 2

.before()

和

.after()

会将参数作为字符串插入，除非它们是 DOM 节点。

您本质上需要从 DOM 中删除项目，将它们包装在新的 div 中，然后将包插入回 DOM 中。

const explanationHeading = document.querySelector('p.explanation-heading');
const explanationItem = document.querySelectorAll('p.explanation-item');
const lastExplanationItem = explanationItem[explanationItem.length - 1];

let wrapper = document.createElement( "div" )
wrapper.classList.add( "explanation-wrapper" )

for( let item of explanationItem ) {
  // This effectively moves the item
  wrapper.appendChild( item )
}

explanationHeading.insertAdjacentElement( "beforebegin", wrapper )
wrapper.insertAdjacentElement( "afterbegin", explanationHeading )

.explanation-wrapper {
  background-color: #c0ffee;
  border: 2px solid #cab;
  box-shadow: 2px 2px 4px black;
}
.explanation-wrapper div {
  margin-left: 1rem;
  text-decoration: none;
}

.explanation-heading {
  border-bottom: 1px solid red;
  margin: 1rem 1rem;
}

.howTo-heading {
  border-bottom: 1px solid blue;
  margin: 1rem 1rem;
}

.reference-headaing {
  border-bottom: 1px solid green;
  margin: 1rem 1rem;
}

<div class="MCRelationshipsProxy_0">
    <p class="explanation-heading">Related Articles</p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>

    <p class="howTo-heading">How To Guides</p>
    <p class="howTo-item"><a href="">link</a></p>

    <p class="reference-headaing">Reference Articles</p>
    <p class="reference-item"><a href="">link</a></p>
</div>