親要素なしの並列divのDOMの作成方法。

Question

前提・実現したいこと

JavaScriptで下記のようなDOMは、どのようにすれば作成できますか？
ご教示お願いします。

<div>要素1</div><div>要素2</div><div>要素3</div>

試したこと

下記のようなDOMを作成することはできました。

var dom = document.createElement("div")
dom.innerHTML = "<div>要素1</div><div>要素2</div><div>要素3</div>";
console.log(dom);

実行結果。

<div><div>要素1</div><div>要素2</div><div>要素3</div></div>

しかし、下記ではエラーになってしまいます。

var dom = document.createElement("<div>要素1</div><div>要素2</div><div>要素3</div>");
console.log(dom);

Uncaught DOMException: 
Failed to execute 'createElement' on 'Document': 
The tag name provided ('<div>要素1</div><div>要素2</div><div>要素3</div>') is not a valid name.

###　追記
ご回答ありがとうございます。
今回、教えていただき、そもそも質問の前提が間違っていることがわかりました。
やりたかったことは、こちらの質問に書きました。

Comments

[kei344]

それをどのように使いたいのか、何を解決するためにそういう操作をしようとしているかを、質問文に追記していただけませんか？

[tkshp]

コメントが遅くなり、申し訳ありません。
やりたかったことは、追記に書きました。

Answer 1

const div = document.createElement('div');
for (let i = 1; i <= 3; i++) {
  const div1 = document.createElement('div');
  div1.textContent = "要素" + i;
  div.appendChild(div1);
}
console.log(div);
//"<div><div>要素1</div><div>要素2</div><div>要素3</div></div>"

for (let i = 1; i <= 3; i++) {
  const div1 = document.createElement('div');
  div1.textContent = "要素" + i;
  document.body.appendChild(div1);
}

document.body.innerHTML = "<div>要素1</div><div>要素2</div><div>要素3</div>";

ドキュメントオブジェクトモデル (DOM) - Web API | MDN
DOM のモデルは文書を論理的なツリーで表現します。ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。

上記が理解できれば、
<div>要素1</div><div>要素2</div><div>要素3</div>
はDOMではなく、単なるノードの集合ということも分かると思います。（ツリーになっていない）

結局、最終的に何をしたいのかを書かないと質問として意味がないです。

Comments

[tkshp]

コメントが遅くなり、申し訳ありません。
教えていただき、DOMを理解せずに質問していたことがわかりました。
ご教示いただき、ありがとうございました。
またやりたかったことは、追記に書きました。

Answer 2

親要素なしの並列divのDOMの作成方法

親に**要素(ELEMENT_NODE)ではなく別のノード(DOCUMENT_FRAGMENT_NODE)**を持ち、その子孫を得る例

var frag=document.createDocumentFragment();
var markup="";
for(;frag.childNodes.length<=3;) {
  let div = document.createElement("div");
  frag.appendChild( div );
  div.textContent = "要素"+frag.childNodes.length;
  markup += div.outerHTML;
}
console.log(...[frag.childNodes]); // NodeList
console.log(...[frag.children]); // HTMLCollection
console.log(markup); // markup

親要素なしでマークアップを得るには、outerHTML を使って文字列結合する案しか思いつきませんでした。

Comments

[tkshp]

コメントが遅くなり、申し訳ありません。
教えていただき、DOMを理解せずに質問していたことがわかりました。
ご教示いただき、ありがとうございました。
またやりたかったことは、追記に書きました。

Answer 3

きっちりdomで処理したいならこう。
親なしのdomの集合は、HTML要素にならないのでよく理解を深めたほうがよいでしょう
（NodeListやHTMLCollectionならOK）

Comments

[yambejp]

const div=[
['要素1'].reduce((x,y)=>(x.appendChild(document.createTextNode(y)),x),document.createElement('div')),
['要素2'].reduce((x,y)=>(x.appendChild(document.createTextNode(y)),x),document.createElement('div')),
['要素3'].reduce((x,y)=>(x.appendChild(document.createTextNode(y)),x),document.createElement('div')),
].reduce((x,y)=>(x.appendChild(y),x),document.createElement('div'));
console.log(div);

[yambejp]

もしくは並列のHTMLのnode名や属性が同じなら
const div=['要素1','要素2','要素3'].map(
x=>[x].reduce(
(x,y)=>(x.appendChild(
document.createTextNode(y)
),x),document.createElement('div'))
).reduce(
(x,y)=>(x.appendChild(y),x),document.createElement('div'));
console.log(div);

[tkshp]

コメントが遅くなり、申し訳ありません。
教えていただき、DOMを理解せずに質問していたことがわかりました。
ご教示いただき、ありがとうございました。
またやりたかったことは、追記に書きました。

Answer 4

var dom1 = document.createElement("div")
var dom2 = document.createElement("div")
var dom3 = document.createElement("div")
var dom4 = document.createElement("div")

Comments

[tkshp]

コメントが遅くなり、申し訳ありません。
ご教示いただき、ありがとうございました。
またやりたかったことは、追記に書きました。