ademontis 0 Newbie Poster

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

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

My JS 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;

}

Sadly this does not work properly, and all the tags i insert between my custom tag opening and closing appear AFTER the fieldset box, instead of appearing inside.
For example, this is my real-case code:

<group label="ciao bello"> 
<form action="try.php" method="post">
<textfield size="30" placeholder="Name here"></textfield> Name<br>
<textfield size="30" placeholder="Surname here"></textfield> Surname<br>
<emailfield size="30" placeholder="user@domain"></emailfield> Email<br>
<datefield min="1900-01-01" max="2021-01-30"></datefield> Birth date<br>
<radio value="male" choiceset="sex"></radio> Male<br>
<radio value="female" choiceset="sex"></radio> Female<br>
Upload your image: <upload name="picture"></upload> <br>
<colorbox value="#FF0000"></colorbox> Pick your favourite color<br>
<br>
<submit name="send"></submit> <reset>Reset fields</reset>
</form>
</group>

The result is that the form fields appear outside the group / fieldset box.
See here on the right side after the NOT WORKING text:

The curious thing is that if i enclose the <group> tags inside a <blockquote> pair, i get the result i want.
See here after the WORKING text

I want to be ble to use the custom tags without having to nest it in the blockquote.

Anybody can point me to what i a doing wrong or correct my code? Thanks in advance.

Alex

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.