How To Build A DOM Tree? - AFS

AFS Integration Guide

Reference Guide

Custom widgets often enable integrator to customize the widget's DOM tree. In this case, the element to which the built DOM tree must be attached is passed as a parameter function.

Here is a little example that shows how to handle DOM nodes with jQuery.

// Lets assume the DOM node is the element variable
// We load element with JQuery
var $element = $(element);
// Builds a h2 node and inserts it into the given element
$element.append($('<h2 />', {'class':'title', text:'Hello world!'}));
// Builds a button with a click handler
var $button = $('<button />', {'class': 'button', text: 'Click me!', click: function() {window.alert('I have been clicked');}});

This code inserts the following code into the given element:

<h2 class="title">Hello world!</h2><button class="button">Click me!</button>

When clicked, the button opens a pop-up window with the text: I have been clicked