I am creating some custom HTML tags using Javascript DOM manipulation, I have created a lot of them and they all work fine, except when they have to contain other tags. I am creating a tag called with the following syntax: <group label "(text here)"> (other tags here - for example some input fields)

Basically this single tag should replace the Fieldset / Legend coupled tags.

My code is the following:

var groups = document.getElementsByTagName("group");
for (var i=0; i<groups.length; i++) {
var label="",hhtml="<fieldset><br>";

if (groups[i].getAttribute("label") != undefined) 
label=groups[i].getAttribute("label");

var hcustomContent = groups[i].innerHTML + groups[i].textContent;


hhtml+="<legend>" + label + "</legend><br>" + hcustomContent + "</fieldset>";
groups[i].innerHTML=hhtml;
    
}

This does not work, and all the other tags i insert between my tags appear AFTER the fieldset box, instead of appearig inside. Anybody can point me to what i a doing wrong or correct my code? Thanks in advance.