Retrieve children Added up to the point

Is there a way to retrieve only the children added up-to a specific point. For example, I have created rect and circle and I am executing fnTwo before I have added a path with the the hope that it returns only rect and circle. But it returns all the children; e.g. rect, circle +path; even though path was added after. Is there a way for me execute fnTwo to get the children that were added up to that point in time.

const svg = document.querySelector('svg');
const svgns = "http://www.w3.org/2000/svg"
const element = ['rect', 'circle'];

//fn for append
const fnOne = (element) => {
    const child = document.createElementNS(svgns, element);
    svg.append(child);

}
//append all elements
for (const elements of element) {
    const element = elements;
    fnOne(element)
};
// get all the children elements **up to this point in time**
const fnTwo = (element) => {
    const children = element.children;
  //do something with the children
    console.log(children); //brings all children added before + after
}

const children = fnTwo(svg);
//add a path to test if it is retrieved through fnTwo
const childThree = document.createElementNS(svgns, 'path');
svg.append(childThree);

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <svg>      
    </svg>
  </body>
</html>

Solution

The problem you are experiencing is because you return original "array" of children, what you need to do is to return a copy:

const svg = document.querySelector('svg');
const svgns = "http://www.w3.org/2000/svg"
const element = ['rect', 'circle'];

//fn for append
const fnOne = (element) => {
    const child = document.createElementNS(svgns, element);
    svg.append(child);

}
//append all elements
for (const elements of element) {
    const element = elements;
    fnOne(element)
};
// get all the children elements **up to this point in time**
const fnTwo = (element) => {
    const children = [...element.children]; //shallow copy of the array
  //do something with the children
    console.log(children); //brings all children added before + after
}

const children = fnTwo(svg);
//add a path to test if it is retrieved through fnTwo
const childThree = document.createElementNS(svgns, 'path');
svg.append(childThree);

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <svg>      
    </svg>
  </body>
</html>