Buttons tag is crucial for Jquery Attr to work

Question

atrr function is not giving the required response, I have a small code that gets data from an external API which has several data in a dict.

<div id="facet-knowledge-panel" style="margin-left: 70px;">
        <h2 id="facet_panels_title"></h2>
        <div id="facet_panels_content"></div>
    </div>

    <button id="open">open</button>
 
    <script>
        let facet_kp = "http://localhost/render-to-html?facet_tag=category&value_tag=en:beers";

        fetch(facet_kp)
            .then((response) => {
                if (response.ok) {
                    return response.text();
                }
                else {
                    throw new Error("Network Response Error while fetching facet kp");

                }
            })
            .then(data => {
                let title = document.getElementById("facet_panels_title");
                title.innerHTML = "Facet knowledge panel";

                let knowledgepanel = document.getElementById("facet_panels_content");
                knowledgepanel.innerHTML = data;
            })
    </script>

Here, id="facet_panels-content" will return data after getting data from API, it contains data in "<details><summery>..." tag, but I want to default Leave the Details tab open.

<script>
        $(document).ready(function(){
          $("#open").click(function(){
            $("#HungerGames").attr("open",true);
          });
        });
</script>

I'm using Jquery code to open a single detail label via a button, it's working fine, but I want it to open by default without any button.

$(document).ready(function(){
            $("#HungerGames").attr("open",true);
        });

So if I use this, it won't open the "Details" tab for that id. I want to keep the "Details" tab open by default without any buttons.

Answer 1

#HungerGames The selector does not match any element in the HTML.

So maybe this operation is to add it to the page? ：

knowledgepanel.innerHTML = data;

Obviously, you can't interact with the element until it's been added to the page. So instead of trying to show the element when the page loads, show it when you add it to the page:

knowledgepanel.innerHTML = data;
$("#HungerGames").attr("open",true);