Is there any way to append children to Phaser DOMElements?

Phaser 3
1

I’m making a login form where the user builds their username from 3 separate drop-down menus, where they select an adjective, color, and an animal. However, to avoid having users click through the menus (clicking on the top for every drop down) and building the same user name, I want to randomize each select menu.

I made an html page with a script that randomizes the order an array of values and appends them to an html select tag. However when this page is loaded into my phaser game with:

this.domOverlay = this.add.dom(180, 300).createFromHTML('html_login');

It fails to generate the select menus, most likely because I think Phaser is literally only taking the HTML and ignoring the JS I wrote.

Is there any way to append option elements to a select element after Phaser creates an overlay?
I read here (https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.DOMElement.html#getChildByID__anchor) that there is a function to grab the child by its ID, however I think this is more for getting values of a form, not appending to a DOM. Also, at this point, this is a phaser object I believe, so it might not be possible to append at all? What should I do if I want to randomize the select element options? I’m thinking of building a form in Phaser rather than use HTML, but this way would save me work.

2

I think that would make

<div>html_login</div>

You need something like

this.add.dom(180, 300).setElement('html_login')
3

Actually createFromHTML does get me the full HTML page, I loaded it earlier with

this.game.load.html("html_login", "static/html/login.html");

When I tried setElement, it made my screen go entirely white, maybe I’m using it wrong but I don’t think it worked.

I think after I CreateFromHTML, I can’t edit it as I would a DOM, so I might have to make a form using actual phaser text and rectangles…

4 
console.log(this.add.dom(180, 300).createFromHTML('html_login').node)
5

I think you need to use createFromCache instead of createFromHTML, so that you can use the preloaded form.
Although that doesn’t solve your original issue,right?