using replaceWith to replace an element with a DOMstring or multiple elements in Vanilla JS

Question

I can't find examples of vanilla javascript replaceWith using multiple elements/nodes .

Given HTML with numerous children:

<span id="parent"><span>Hardware:</span> <br>
the <span id="oldChild">physical</span> components of a <span>computer</span>.</span>
      

Can I use replaceWith to swap any one of the child spans, say #oldChild , with multiple elements AND text nodes (the commas and spaces following these spans):

let newSpans = 
"<span id="newChild1">kickable</span>, 
<span id="newChild2">throwable</span>, 
<span id="newChild3">punchable</span>"

Is there any other vanilla method that will work like this?:

oldChild.replaceWith( newSpans );

Answer 1

Can I use replaceWith to swap any one of the child spans with multiple elements AND text nodes

The signature for Element.replaceWith() accepts a variable number of Node or DOMString arguments

Syntax

replaceWith(...nodes)

so, yes

 // helper / utility function const createSpan = (id, textContent) => Object.assign(document.createElement("span"), { id, textContent }) document.getElementById("oldChild").replaceWith( createSpan("newChild1", "kickable"), ", ", createSpan("newChild2", "throwable"), ", ", createSpan("newChild3", "punchable") )

 #newChild1 { color: green; } #newChild2 { color: orange; } #newChild3 { color: red; }

 <span id="parent"><span>Hardware:</span> <br> the <span id="oldChild">physical</span> components of a <span>computer</span>.</span>