rad-gui
    Preparing search index...

    Function el

    • Creates an HTML element with the specified tag name, properties, event handlers. This utility function provides a concise way to create and configure DOM elements without lengthy chains of DOM API calls.

      Type Parameters

      • T extends keyof HTMLElementTagNameMap

        The specific HTML element type being created.

      Parameters

      • tagName: T

        The tag name of the HTML element to create (e.g., 'div', 'button', 'input').

      • props: Record<string, any> = {}

        An object containing properties to set on the element. Common properties include:

        • id: The element's ID
        • textContent: Text content to set
        • value: For input elements
        • placeholder: For input elements
        • href: For anchor elements
        • src: For image elements
        • disabled: For form elements
        • classList: An array of strings representing CSS classes to add to the element
        • children: An array of child HTML elements to append to the created element
      • eventHandlers: Record<string, EventHandler> = {}

        An object mapping event names (e.g., 'click', 'input', 'submit') to EventHandler tuples.

      Returns HTMLElementTagNameMap[T]

      The created HTML element with all properties, classes, event handlers, and children applied.

      // Create a simple div
      const simpleDiv = el('div');

      // Create a button with an ID, classes, and a click handler
      const myButton = el(
        'button',
        { 
          id: 'submit-btn', 
          textContent: 'Submit',
          classList: ['btn', 'btn-primary']
        },
        {
          click: [(event) => { console.log('Button clicked!', event); }],
          // With capture option
          focus: [(event) => { console.log('Button focused!'); }, { capture: true }]
        }
      );

      // Create a form with children and event handling
      const form = el(
        'form',
        { 
          id: 'contact-form',
          classList: ['form-container'],
          children: [
            el('input', { 
              type: 'text',
              name: 'username',
              placeholder: 'Enter username',
              required: true
            }),
            el('button', { type: 'submit', textContent: 'Send' })
          ]
        },
        {
          submit: [(event) => {
            event.preventDefault();
            console.log('Form submitted!');
          }]
        }
      );

    Settings

    Member Visibility