How to sequentially create an Element from a string (js)

Help me please! There is a source line html from which it is necessary to create Element sequentially. That is, there is a way to create everything at once, simply by parsing the string through innerHTML or DOMParser, but then to iterate over all the elements, you need getElementsByTagName(“*”), which is very slow. Is there a way to build html sequentially so that it takes each element in a loop?

Let’s say we have an html string:

<div>abc<span class="abc">123</span>567</div>

And, from it to make some code like this:

let parentDiv = document.createElement("div");
for(let i=0;i<3;i++){
  switch(i){
    case 0:
     let txt1 = document.createTextNode("abc")
     parentDiv.appendChild(txt1);
    break
    case 1:
      let el1 = document.createElement("div");
      el1.setAttribute("class","abc");
      for(let j=0;j<1;j++){
        switch(j){
          case 0:
            let txt1 = document.createTextNode("123")
            el1.appendChild(txt1);
          break;
        }
      }
      parentDiv.appendChild(el1);
     break
     case 2:
      let txt2 = document.createTextNode("567")
      parentDiv.appendChild(txt2);
     break
  }
}

Only to generate such code for any valid html string.

I will be very grateful for the answer!

I think that a template will be needed here to create such code, as well as a regular expression regexp for tags. It’s just hard to figure out how to do it.