Skip to content

Edit, create and attach event handlers to HTML-Elements without any trouble.

License

Notifications You must be signed in to change notification settings

leopf/VanillaHTML.JS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

VanillaHTML.JS

HTML becomes much simpler with VanillaHTML.JS.

VanillaHTML.JS only has a couple lines of code and all it does is execute a function for each selected element. There is only one step:

  • register a callback function with a selector

the callback function will be calln having the element assigned under "this".

html("span", function() {  
    this.innerHTML = "hello world!";
});

//add an additional element after 1 second
setTimeout(function() {
    document.body.appendChild(document.createElement("span"));
}, 1000);

HTML stages for this example

Stage 1 - the raw HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="vanillahtml.js"></script>
    <script>
        html("span", function() {  
            this.innerHTML = "hello world!";
        });
        setTimeout(function() {
            document.body.appendChild(document.createElement("span"));
        }, 1000);
    </script>
    <title>Document</title>
</head>
<body>
    <span></span>
</body>
</html>

Stage 2 - after initially loading

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="vanillahtml.js"></script>
    <script>
        html("span", function() {  
            this.innerHTML = "hallo";
        });
        setTimeout(function() {
            document.body.appendChild(document.createElement("span"));
        }, 1000);
    </script>
    <title>Document</title>
</head>
<body>
    <span>hello world!</span>
</body>
</html>

Stage 3 - after 1 second

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="vanillahtml.js"></script>
    <script>
        html("span", function() {  
            this.innerHTML = "hallo";
        });
        setTimeout(function() {
            document.body.appendChild(document.createElement("span"));
        }, 1000);
    </script>
    <title>Document</title>
</head>
<body>
    <span>hello world!</span>
    <span>hello world!</span>
</body>
</html>

About

Edit, create and attach event handlers to HTML-Elements without any trouble.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published