Phaser API Documentation

Description:

Binds a new DOM Element to this Game Object. 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 on the new element.

The element argument you pass to this method can be either a string tagName:

<h1 id="heading">Phaser</h1>

this.add.dom().setElement('heading');

Or a reference to an Element instance:

<h1 id="heading">Phaser</h1>

var h1 = document.getElementById('heading');

this.add.dom().setElement(h1);

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().setElement(h1, '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().setElement(h1, style, 'Phaser');