Documentation Center

Filling the panel with content

This section demonstrate ways of filling your custom panel with content.

In order to put contents in an HTML element, which is what rootEl is, you can do this:
rootEl.innerHTML = "<div>Hello World</div>";

This means you would have to create a string of all the contents that you want to put in whenever you want to render the custom panel.

A more useful way would be to write functions that build HTML elements in the panel, and to re-use these functions to re-render the parts of the panel that need updating.
function writeText(rootEl, text)
{
  var div = doc.getElementById("text");
  if(!div)
  {
    div = doc.createElement("div");
    rootEl.appendChild(div);
  }
  div.setAttribute("id", "text");

  var textNode = doc.createTextNode(text);  
  div.appendChild(textNode);
}

writeText(rootEl, "Hello World");
This is just a simple example of course, but this make for a very clean way of rendering a custom panel.