画像と文章が1セットのものが複数あり（こんな感じのhtmlが複数あるのを）内容画像と文章を分けたい … 内容内容内容 … みたいにJavaScriptで組み替えたいのですが、可能でしょうか。

htmlを組み替え（？）たい

解決済

質問者：16164le_tai
質問日時：2021/11/15 12:05
回答数：2件

画像と文章が1セットのものが複数あり（こんな感じのhtmlが複数あるのを）
<div>
<img>
<p>内容</P>
</div>

画像と文章を分けたい
<div>
<img><img><img>…
</div>
<div>
<p>内容</p><p>内容</p><p>内容</p>…
</div>

みたいにJavaScriptで組み替えたいのですが、可能でしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： babu_babu_baboo
回答日時：2021/11/16 09:02

ご面倒をお掛けしますが、全角空白は削除してください。

<!DOCTYPE html>
<meta charset="UTF-8">
　<title>Test</title>
　　
　　　　<body>
　　　　　
　　　　　　　<div>
　　　　　　　　 <img alt="1">
　　　　　　　　　 <p>内容1</P>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　　　<div>
　　　　　　　　　 <img alt="2">
　　　　　　　　 <p>内容2</P>
　　　　　　　</div>
　　　　　
　　　　<div>
　　 <img alt="3">
　 <p>内容3</P>
</div>

<div>
　 <img alt="4">
　　 <p>内容4</P>
　　　　</div>
　　　　　
　　　　　　　
　　　　　　　　<script>
　　　　　　　　　const
　　　　　　　　　　 div0 = document.createElement ('div'),
　　　　　　　　　　 div1 = div0.cloneNode (false),
　　　　　　　　　　 imgs = [...document.querySelectorAll ('div>img')],
　　　　　　　　　 ps = [...document.querySelectorAll ('div>p')],
　　　　　　　　 div = ps.map (e=> e.parentNode),
　　　　　　　 body = div[0].parentNode;
　　　　　
　　　　imgs.forEach (
　　 e=> div0.appendChild (e));
　
ps.forEach (
e=> div1.appendChild (e));

　div.forEach (
　　 e=> e.remove ());
　　　　
　　　　　body.appendChild (div0);
　　　　　　　body.appendChild (div1);
　　　　　　　　</script>