Chain

Chainable DOM manipulation class supporting element creation, attribute setting, event listening, etc.

API

Chain

Constructor

new Chain(tagName: string, options?: ElementCreationOptions)

Main Methods

Method	Description	Return Value
`setAttribute`	Set element attribute	`Chain`
`removeAttribute`	Remove element attribute	`Chain`
`append`	Add child element	`Chain`
`remove`	Remove child element	`Chain`
`setTextContent`	Set text content	`Chain`
`setStyle`	Set style	`Chain`
`addChild`	Add child element (supports array)	`Chain`
`listen`	Add event listener	`Chain`
`clearListener`	Remove event listener	`Chain`
`clearAllListener`	Remove all event listeners	`Chain`

Properties

Property	Description	Type
`element`	DOM element	`HTMLElement`

Example

Basic Usage

import { Chain } from 'ranuts';

const div = new Chain('div')
  .setAttribute('id', 'myDiv')
  .setAttribute('class', 'container')
  .setTextContent('Hello World')
  .setStyle('color', 'red');

document.body.appendChild(div.element);

Chaining

import { Chain } from 'ranuts';

const button = new Chain('button')
  .setAttribute('type', 'button')
  .setTextContent('Click Me')
  .setStyle('padding', '10px')
  .setStyle('background', 'blue')
  .listen('click', () => {
    console.log('Button clicked');
  });

document.body.appendChild(button.element);

Add Child Elements

import { Chain } from 'ranuts';

const container = new Chain('div')
  .addChild(new Chain('h1').setTextContent('Title'))
  .addChild(new Chain('p').setTextContent('Content'));

document.body.appendChild(container.element);

Batch Add Child Elements

import { Chain } from 'ranuts';

const list = new Chain('ul').addChild([
  new Chain('li').setTextContent('Item 1'),
  new Chain('li').setTextContent('Item 2'),
  new Chain('li').setTextContent('Item 3'),
]);

document.body.appendChild(list.element);

SVG Elements

import { Chain } from 'ranuts';

const svg = new Chain('svg').setAttribute('width', '100').setAttribute('height', '100');

const circle = new Chain('circle').setAttribute('cx', '50').setAttribute('cy', '50').setAttribute('r', '40');

svg.addChild(circle);

Notes

Chaining: All methods return Chain instance, supporting chaining.
SVG support: Automatically recognizes SVG tags, uses correct namespace for creation.
Event management: Internally maintains event listener mapping for easy management and removal.
Use case: Commonly used for dynamically creating DOM structures, building UI components, etc.