Phaser API Documentation

  Version: 
createElement(tagName, [style], [innerText])

Description:

Creates a native DOM Element, adds it to the parent DOM Container and then binds it to this Game Object, so you can control it. The tagName should be a string and is passed to document.createElement:

this.add.dom().createElement('div');

For more details on acceptable tag names see: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

You can also pass in a DOMString or style object to set the CSS on the created element, and an optional innerText value as well. Here is an example of a DOMString:

this.add.dom().createElement('div', 'background-color: lime; width: 220px; height: 100px; font: 48px Arial', 'Phaser');

And using a style object:

var style = {
  'background-color': 'lime';
  'width': '200px';
  'height': '100px';
  'font': '48px Arial';
};

this.add.dom().createElement('div', style, 'Phaser');

If this Game Object already has an Element, it is removed from the DOM entirely first. Any event listeners you may have previously created will need to be re-created after this call.

Parameters:

name type arguments description
tagName string

A string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don't use qualified names (like "html:a") with this method.

style string | any <optional>

Either a DOMString that holds the CSS styles to be applied to the created element, or an object the styles will be ready from.

innerText string <optional>

A DOMString that holds the text that will be set as the innerText of the created element.

Returns:
Description:

This DOM Element instance.

Since: 3.17.0