Chain

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

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);

import { Chain } from 'ranuts';

const button = new Chain('button')
  .setAttribute('type', 'button')
  .setTextContent('クリックしてください')
  .setStyle('padding', '10px')
  .setStyle('background', 'blue')
  .listen('click', () => {
    console.log('ボタンが押されました');
  });

document.body.appendChild(button.element);

import { Chain } from 'ranuts';

const container = new Chain('div')
  .addChild(new Chain('h1').setTextContent('見出し'))
  .addChild(new Chain('p').setTextContent('本文'));

document.body.appendChild(container.element);

import { Chain } from 'ranuts';

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

document.body.appendChild(list.element);

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);