https://github.com/xerdi/javascript-dom-injector

Form based automated HTML builder.
https://github.com/xerdi/javascript-dom-injector

Last synced: about 2 months ago
JSON representation

Form based automated HTML builder.

• Host: GitHub
• URL: https://github.com/xerdi/javascript-dom-injector
• Owner: Xerdi
• Created: 2015-02-23T11:04:49.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-05-17T13:58:02.000Z (over 9 years ago)
• Last Synced: 2023-02-28T10:01:33.903Z (almost 2 years ago)
• Language: CSS
• Size: 344 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JavaScript-DOM-Injector

Form based automated HTML builder.

## Dependencies

A browser that supports JavaScript (no JQuery or something else required)

## Put this at the bottom of your ``````

```html

```

# Usage

To use the Builder object, you need to come with a DOM form object which must contain some particular attributes.

## HTML Attributes

There can be data-* attributes on inputs, textAreas and form for achieving a builder form.

* ```data-type``` defines the tagname that needs to be created

* -optional ```data-path``` defines tagnames seperated by a space, alone or with id/class (not both id and class)

* -optional ```data-delimiter``` define with "default" to generate multiple elements on enter

* -optional ```data-content``` defines whether the text needs to be inserted on an attribute e.g. src for ``````

* -only on form ```data-targetid``` defines the target which will be injected (don't use #)

## HTML Form Example

```html



  

  

  

```

In the example you can see ```data-path="footer ul"``` which not exists. The footer and ul will be generated if not present. If you want a seperate footer for an input, you can give it a class or id, as it will then be inserted in a new element.

## JavaScript Hook Example

The previous mentioned HTML form will be hooked in this example.

```javascript

//  retrieve the DOM form

var form = document.getElementById("formInjector");

//  create a Builder object with the given form

var builder = new Builder(form);

//  initiate the building when focused on the form

form.addEventListener('focus', function () {

  builder.start();

}, true);

```