JSFiddle - React, Tailwind, and code Playground

HTML

<iframe name="myframe1" id="myframe1" width="100%" height="100%" src="about:blank"></iframe>

JavaScript

document.getElementById('myframe1').contentWindow.document.body.innerHTML =
    '<frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0">\
        <frame name="page1" src="c.html" scrolling="no"></frame>\
        <frame name="page2" src="d.html" >\
            <html>\
                <head></head>\
                <body id="top">\
                    <div id="div1">\
                        <div id="div2">\
                            <div id="div3">\
                                <ul id="x">\
                                    <li>a</li>\
                                    <li>b</li>\
                                </ul>\
                            </div>\
                        </div>\
                    </div>\
                </body>\
            </html>\
        </frame>\
    </frameset>';

console.log(document.getElementById('myframe1').contentWindow.document.getElementById('x'));