How to append only node's child nodes?

Question

Assuming the following node(s) (which is/are actually not generated like this):

let outer = document.createElement('div');
outer.innerHTML = `
  <div>foo</div>
  <div>bar</div>
  .
  .
  .
  <div>whatever</div>
`;

Now I can append outer to another node:

let body = document.querySelector('body');
body.append(outer);

But how to append only the inner of outer without loosing event listeners etc.?

Delegate from the nearest static container - in this case body — mplungjan, Jun 23 '22 at 20:00
Please post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Jun 23 '22 at 20:01
If you are concerned about preserving event handlers, then you should see how [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation) is done. — zer00ne, Jun 23 '22 at 20:01
"_without loosing event listeners_": I don't see any event listeners in the details of your question. — jsejcksn, Jun 23 '22 at 20:15
@mplungjan How do you mean "delegate from the nearest static container"? — Fred, Jun 23 '22 at 20:22
@zer00ne That doesn't answer my question, but thank you anyway. — Fred, Jun 23 '22 at 20:23
@jsejcksn I left them out in my simple example for the sake of simplicity. — Fred, Jun 23 '22 at 20:24
If you have event listeners, move them to the body. `body.addEventListener("click", function(e) { const tgt = e.target; if (tgt.matches(".divClass1")) .... })` — mplungjan, Jun 23 '22 at 20:26
However it seems they are NOT lost when appended, so never mind my comment — mplungjan, Jun 23 '22 at 20:37

Barmar · Accepted Answer · 2022-06-23T20:35:43.357

2

Call append() with each child of outer as a separate argument by using the ... syntax to spread an iterable.

body.append(...outer.children);

edited Jun 23 '22 at 20:35

answered Jun 23 '22 at 20:11

Barmar

741,623
53
500
612

Why not use the more compact ES6 syntax? – Barmar Jun 23 '22 at 20:20
I figured there was an easier/more intuitive way. Thank you! – Fred Jun 23 '22 at 20:20
Just iterate the `HTMLCollection` directly with a `for...of` loop: `for (const child of outer.children) { body.append(child); }` – jsejcksn Jun 23 '22 at 20:24
@jsejcksn That won't work because appending the node somewhere else will take it out of the `children` list. – Barmar Jun 23 '22 at 20:26
1

@trincot I just came up with something better. – Barmar Jun 23 '22 at 20:27
@Barmar Oh, I see... because it's live. :/ – jsejcksn Jun 23 '22 at 20:33
@Barmar Great. Just one closing parenthesis too many. – Fred Jun 23 '22 at 20:35
@jsejcksn "because it's live. :/" What do you mean by that? – Fred Jun 23 '22 at 20:37
1

@Fred When you append a child to another node, it's immediately removed from the children of `outer`. If you try to iterate over `outer.children` directly, indexes change as you're going and the iteration will skip elements. – Barmar Jun 23 '22 at 20:40

score 1 · Answer 2 · answered Jun 23 '22 at 20:37

To answer your "without losing event handlers" - it turns out your are not when you append

Without delegation

let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
  <div class="foo" onclick="console.log('Foo clicked')">foo</div>
  <div class="bar">bar</div>
  <div>whatever</div>
`;

let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);

.outer { height:100px; width:100px; border: 1px solid red;}

With delegation from body

let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div>whatever</div>
`;

let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);
body.addEventListener("click", e => {  
  const tgt = e.target;
  if (tgt.matches(".foo")) console.log("Foo clicked")
  else if (tgt.matches(".bar")) console.log("Bar clicked")
})

.outer { height:100px; width:100px; border: 1px solid red;}

How to append only node's child nodes?

2 Answers2