Samu - HTML

Samu is a lightweight HTML library that simplifies and streamlines the process of creating and manipulating HTML elements in your web applications.

Getting Started

To get started using Samu, simply add the following script tag to your HTML file:

<script src="path/to/samu.js"></script>

Once Samu is installed, you can create HTML elements using the following syntax:

var myElement = samu.create('div', {
  text: 'Hello, World!'
});

In this example, we create a new div element with the text 'Hello, World!' and store it in the myElement variable. To add this element to the DOM, we simply call the appendTo method:

myElement.appendTo(document.body);

This will add the new div element to the end of the body element in the current page.

Samu API

samu.create(elementType, [options])

Creates and returns a new HTML element of the specified elementType, with the specified options. Possible options include:

• text: The text content of the element
• html: The HTML content of the element
• styles: An object containing style properties to apply to the element
• attributes: An object containing attributes to apply to the element
• classList: An array of classes to add to the element

Example:

var myElement = samu.create('div', {
  text: 'Hello, World!',
  styles: {
    backgroundColor: '#ccc',
    color: '#fff'
  },
  attributes: {
    id: 'myElement',
    tabindex: '0'
  },
  classList: ['my-class']
});

samu.get(elementSelector)

Returns an HTML element that matches the specified elementSelector.

Example:

var myElement = samu.get('#myElement');

samu.getAll(elementSelector)

Returns an array of HTML elements that match the specified elementSelector.

Example:

var myElements = samu.getAll('.my-class');

samu.on(elementSelector, eventName, callback)

Attaches an event listener to the HTML element(s) that match the specified elementSelector, for the specified eventName. The callback function will be called when the event is triggered.

Example:

samu.on('#myButton', 'click', function(event) {
  console.log('Button clicked');
});

samu.off(elementSelector, eventName, callback)

Removes an event listener from the HTML element(s) that match the specified elementSelector, for the specified eventName and callback.

Example:

samu.off('#myButton', 'click', myClickHandler);

samu.appendTo(parentElement, childElement)

Appends the childElement to the parentElement in the DOM.

Example:

samu.appendTo(document.body, myElement);

Conclusion

With Samu, creating and manipulating HTML elements in your web applications is easier than ever before. Its lightweight and intuitive API makes it a great choice for both new and experienced developers.