Javascript 获取一系列p元素的内容并将其放置在自己的div中

我有一个DOM结构，它包含一系列任意一种或所有这三种类型的

标记，顺序是随机的：

<p>Some text</p>            <!-- a <p> with only text -->
<p><img src="someImg"></p>  <!-- a <p> with only an <img> -->
<p>                         <!-- a <p> with both text and <img> -->
  <img src="anotherImg">
  Some other text
</p>
...                         <!-- Random combination of these <p> tags -->

一些文本

我需要更改DOM结构，将所有内容放在它自己的

中，并使用一个类来指示原始

标记是否只包含一个内容或两个内容：

<div class="single">        <!-- From <p> tag with only text -->
  <p>Some text</p>
</div>

<div class="single">        <!-- From <p> tag with only an <img> -->
  <img src="someImg">
</div>

<div class="double">        <!-- <img> from <p> tag with both text & <img> -->
  <img src="anotherImg>
</div>

<div class="double">        <!-- <p> from <p> tag with both text & <img> -->
  <p>Some other text</p>
</div>

一些文本

其他一些文本

我使用jQuery成功地将只带有

标记或文本的

标记放入它们自己的

：

$('#content').find('img').each(function(index, element) {
  var parentTag = $(this).parent().get(0).tagName;
  if (parentTag == 'P') {
    $(this).parent().contents().unwrap();
  }
  $(this).wrap('<div class=\"single\"></div>');
});

$('#content').find('p').each(function(index, element) {
  $(this).wrap('<div class=\"single\"></div>');
});

$（'content'）。查找（'img'）。每个（函数（索引，元素）{
var parentTag=$（this.parent（）.get（0）.tagName；
如果（parentTag='P'）{
$（this.parent（）.contents（）.unwrap（）；
}
$（此）.wrap（“”）；
});
$（'#content'）。查找（'p'）。每个（函数（索引，元素）{
$（此）.wrap（“”）；
});

但是我在获取

标记时遇到了问题，这些标记包含图像和文本，并使用单独的类将它们分别放入各自的

标记中

我不一定需要使用jQuery来完成这项工作。有什么想法吗？

用于选择

p

节点。然后迭代节点列表，检查当前元素是否有图像和文本。对于文本验证使用

（函数（）{
函数提取图像（el）{
var img=el.querySelector（'img'）；
如果（！img）返回null；
el.removeChild（img）；
返回img；
}
函数换行（el、cls、isDouble）{
var img=提取图像（el）；
var wrapper=document.createElement（'div'）；
wrapper.classList.add（cls）；
el.parentNode.insertBefore（包装器，el）；
如果（isDouble&&img）{
var imageWrapper=document.createElement（'div'）；
el.parentNode.insertBefore（imageWrapper，el）；
imageWrapper.appendChild（img）；
imageWrapper.classList.add（cls）；
}
el.parentNode.removeChild（el）；
如果（！isDouble&&img）el=img；
附加子对象（el）；
}
函数hasImageAndText（el）{
返回el.querySelector（'img'）&&el.textContent.trim（）？true:false；
}
document.querySelectorAll（“#content p:not（：empty）”）.forEach（el=>{
如果（hasImageAndText（el））换行（el，'double'，true）；
else-wrap（el，单件）；
});
})();
。单个{
背景颜色：金色；
}
.加倍{
背景色：紫罗兰色；
}

一些文本



其他一些文本

用于设置类，但当图像和文本都在同一个
标记中时，我需要将它们分离到各自的
标记中。我不知道这一要求，答案现在已更新。这基本上满足了我的所有需要。使用此代码，除了新的
外，
标记中单独存在的图像仍然由
标记包装。我相信这一行
el.parentNode.removeChild（el）
应该删除额外的
标记，但它似乎没有这样做。这难道不会删除
标签中的所有内容，包括图像吗？我已经解决了这个问题，请检查一下。