diff --git a/README.md b/README.md index 25034a9..abc0caf 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A super small (only 2.7kB) javascript library to make html by chaining javascrip ```js var test = html() - .add('div', {className: 'container'}) + .add('div', {className: 'container', data: { info: 'extraInformation' }}) .contains('div', {className: 'header'}) .contains('h5', {className: 'headerTitle', text: 'This is a header'}).end() .and('div', {className: 'content'}) @@ -17,11 +17,11 @@ var test = html() Produces - ```html -
-
-
This is a header
+
+
+
This is a header
-
+

This is the content

diff --git a/html.js b/html.js index 3d31c2c..465fecd 100644 --- a/html.js +++ b/html.js @@ -16,6 +16,15 @@ var html = (function() { } function makeEle(eTemp) { var element = document.createElement(eTemp.tag); + if(eTemp.hasOwnProperty('data')) { + var dataString = ''; + for(var dataAttr in eTemp.data) { + if(eTemp.data.hasOwnProperty(dataAttr)) { + element.dataset[dataAttr] = eTemp.data[dataAttr]; + } + } + delete eTemp.data; + } for(var attr in eTemp) { if(eTemp.hasOwnProperty(attr)) { element[attr] = eTemp[attr]; @@ -71,6 +80,7 @@ var html = (function() { chunk = appendToLastAtLevel(chunk, level, element); } } + return chunk; } return { add: addEle, @@ -86,4 +96,15 @@ if (typeof exports !== 'undefined') { exports = module.exports = html; } exports.html = html; -} \ No newline at end of file +} + + +var test = html() + .add('div', {className: 'container', data: { info: 'extraInformation' }}) + .contains('div', {className: 'header'}) + .contains('h5', {className: 'headerTitle', text: 'This is a header'}).end() + .and('div', {className: 'content'}) + .contains('p', {text: 'This is the content'}).end() + .end() + .build(); +console.log(test) \ No newline at end of file