Why is </details> inserted earlier than user ?

 function renderGroup(group) { var body = $("body"); body.append("<details open='open'><summary>" + group.name + "</summary>"); for (var i = 0; i < group.users.length; i++){ body.append("user"); } body.append("</details>"); }

At the exit:

 <body> <details open=""> <summary>1</summary> </details> useruser <details> <summary>2</summary> </details> useruser </body>

    1 answer 1

    The fact is that when you write body.append("<details open='open'><summary>" + group.name + "</summary>"); The browser automatically adds a closing tag.
    In order to avoid this, it is better to do this:

     function renderGroup(group) { var body = $('body'); var details = '<details open="open"><summary>' + group.name + '</summary>'; for (var i = 0; i < group.users.length; i++){ details += group.users[i]; } details += '</details>'; body.append(details); }

    • Thanks for the clarification - alex