Alternative for ParentNode.replaceChildren

Question

I just figured, that ParentNode.replaceChildren() won't work in older browsers, for example chrome. How can I re-write it basically?

ModalBody.replaceChildren(loader);

Hi! Please take the [tour] (you get a badge!) and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Your best bet here is to do your research, [search](/help/searching) for related topics on SO, and give it a go. ***If*** you get stuck and can't get unstuck after doing more research and searching, post a [mcve] of your attempt and say specifically where you're stuck. People will be glad to help. — T.J. Crowder, Mar 08 '21 at 10:47
You'd probably use a combination of [`replaceChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild), [`insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML), and [`insertBefore`](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore). — T.J. Crowder, Mar 08 '21 at 10:48
@mplungjan - I think the OP means "older versions of Chrome" since it was just added in v86. — T.J. Crowder, Mar 08 '21 at 10:49
I know - I just wanted to save ppl from having to look it up since it is missing from MDNs page. I would think innerHTML would do the job very well in all cases where there are no event handlers on the children — mplungjan, Mar 08 '21 at 10:51
Maybe this does help you https://stackoverflow.com/questions/4991098/replacing-all-children-of-an-htmlelement — Aalexander, Mar 08 '21 at 10:55
@KatharinaSchreiber what is `loader` - can you please make a [mcve] using the `[<>]` snippet editor — mplungjan, Mar 08 '21 at 10:57

score 1 · Answer 1 · answered Mar 08 '21 at 11:12

Remove children of ModalBody

const parent = document.getElementById("parent");
parent.innerHTML = '';

And then add the loader

parent.innerHTML = loader

const button = document.querySelector("button")
button.onclick = () => {
  // Remove all children of the first, ModalBody
  const first = document.getElementById("first")
  first.innerHTML = ""

  // Add loader
  const second = document.getElementById("second")
  first.innerHTML = second.innerHTML // loader
}

<div id="first">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
</div>


<div id="second">
  <p>Loader</p>
</div>

<button>Replace</button>

score 1 · Answer 2 · answered Jun 05 '21 at 07:40

Depends how far back you want to support

function my_replaceChildren(el, nodes) {
  if (el.replaceChildren)
    return el.replaceChildren(...nodes); // supported Chrome 86+

  el.innerHTML = "";
  el.append( ...nodes);
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

Isidrok · Answer 3 · 2021-03-08T11:07:17.960

You can remove all children from the element and append the new ones:


function replaceChildren(el, ...children){
    el.textContent = '';
    for(let child of children){
        el.appendChild(child);
    }
}

If you are not using a transpiler you will need to make this code compatible with browsers you need to support:

function replaceChildren(el){
    var children = Array.prototype.slice.call(arguments, 1);
    el.textContent = '';
    for(var i = 0; i< children.length; i++){
        el.appendChild(children[i]);
    }
}

You can take a look at caniuse for browser support data.

score 0 · Answer 4 · answered Mar 08 '21 at 11:54

I don't why, but this worked:

ModalBody.insertAdjacentHTML('afterbegin', loader.outerHTML);

Basically here is what I have connected to loader:

var loader = document.createElement('div');
loader.classList.add('loader');
loader.classList.add('is-loading');
loader.classList.add('mt-5');

So, when I tried this

ModalBody.insertAdjacentHTML('afterbegin', loader);

instead of getting the moving circle as a sign that content is being loaded, I got [object HTMLDivElement] in my modal instead, which after a couple of seconds was replaced by the right content. So somehow .outerHTML on loader fixed it. I am still new to all this. Maybe someone can explan why it works this way?

Alternative for ParentNode.replaceChildren

4 Answers4