Append 一个带有动态文本的 div 到另一个 div 而不会丢失数据 - javascript

Question

我有一个看似简单但似乎找不到解决方案的问题。

<div class="text">
  <p class="paragraph">
    <span>The main text is this one </span>
    <span class="bold">with bold text near</span>
  </p>
    <p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>

所以基本上，我必须将所有这些段落 + 跨度合并在一行中，而不会丢失我在第 3 段中获得的动态内容。

最终消息应该是这样的：“正文是附近有粗体文本的这段，在不丢失动态内容的情况下将我添加到另一段附近。”

我怎样才能做到这一点？ 我无法使用 innerText/innerHTML、appendchild，也无法使用动态内容对段落进行硬编码。 非常感谢。

Answer 1

如果没有innerText 、 innerHTML和 DOM 操作函数，真的没有办法改变文档吗？

我假设您可以使用它们，但您还没有设法让它发挥作用？

如果不是这种情况，请在您的问题中添加更多详细信息。

在不知道您想要的标记是什么的情况下，我刚刚删除了所有p.paragraph并将它们替换为带有 innerText 的 textNode。 同时将display: inline设置为p.bold-dynamic以删除新行

我已经将代码更新为现在只需插入大量display: inline

 // find all p.paragrah inside div.text document.querySelectorAll("div.text > p.paragraph").forEach((element) => { // insert a textNode with the innerText of the p.paragraph //element.parentNode.insertBefore(document.createTextNode(element.innerText), element) // set p.bold-dynamic display: inline //element.parentNode.querySelector("p.bold-dynamic").setAttribute("style", "display: inline;") // remove the p.paragraph //element.parentNode.removeChild(element) element.setAttribute("style", "display: inline;") element.querySelectorAll("*").forEach((tag) => { tag.setAttribute("style", "display: inline;") }) element.parentNode.querySelector("p.bold-dynamic").setAttribute("style", "display: inline;") })

 <div class="text"> <p class="paragraph"> <span>The main text is this one </span> <span class="bold">with bold text near</span> </p> <p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p> </div> <div class="text"> <p class="paragraph"> <span>The main text is this one </span> <span class="bold">with bold text near</span> </p> <p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p> </div> <div class="text"> <p class="paragraph"> <span>The main text is this one </span> <span class="bold">with bold text near</span> </p> <p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p> </div>