Using ‘html’ option in SP.UI.ModalDialog.showModalDialog

I was trying to use SP.UI.ModalDialog.showModalDialog with html option using the below code:

var options = {
    title: "Title",
    width: 400,
    height: 600,
    html: "Content of dialog"
};
SP.UI.ModalDialog.showModalDialog(options);

But I was running into this weird error:

Object doesn't support property or method 'getElementsByTagName'
sp.ui.dialog.js, line 2 character 21645

Searching around, I found that html option takes a DOM element rather than a string and that’s why the error.

To use html option you need to write your code as:

var htmlElement = document.createElement("p");
var messageNode = document.createTextNode("Content of dialog");
htmlElement.appendChild(messageNode);

var options = {
    title: "Title",
    width: 400,
    height: 600,
    html: htmlElement
};
SP.UI.ModalDialog.showModalDialog(options);