https://github.com/ariperkkio/virtual-dom-nodes

Apply changes to DOM Elements with minimal work
https://github.com/ariperkkio/virtual-dom-nodes

dom dom-manipulation

Last synced: 15 days ago
JSON representation

Apply changes to DOM Elements with minimal work

• Host: GitHub
• URL: https://github.com/ariperkkio/virtual-dom-nodes
• Owner: AriPerkkio
• License: mit
• Created: 2022-02-17T16:53:08.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-17T10:02:49.000Z (12 months ago)
• Last Synced: 2025-01-22T10:18:20.756Z (15 days ago)
• Topics: dom, dom-manipulation
• Language: TypeScript
• Homepage:
• Size: 227 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# virtual-dom-nodes

[![version](https://img.shields.io/npm/v/virtual-dom-nodes)](https://www.npmjs.com/package/virtual-dom-nodes)

Apply changes to DOM `Element`s with minimal work. Utilizes internal "virtual DOM" to avoid causing expensive and slow DOM manipulations.

## API

### `update`

```ts

import { update } from 'virtual-dom-nodes';

const element = document.createElement('div');

element.setAttribute('id', 'demo-id');

element.appendChild(document.createTextNode('Hello world'));

// Optimally applies required changes to element

update(element, "
Hello world
");


> element.outerHTML

'
Hello world
'

```


### `htmlToElement`

```ts

import { htmlToElement } from 'virtual-dom-nodes';

const element = htmlToElement(`

    


        Hello world!

    

`);


> element instanceof Element

true

> element.outerHTML

'
Hello world!
'

```