pageSnippets is a JavaScript tool for dynamically and easily creating complex HTML or XML. Outsource parts of your big and confusing HTML and generate them on demand. No more need for messy nested document.createElement()produce() the snippets.
This short example to gives you a glimpse how easy it is to use pageSnippets.
- Compose your snippets as an XML file:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<ps:pagesnippets xmlns:ps="https://github.com/suppenhuhn79/pagesnippets">
<ps:snippet name="hello">
<h1>Hello world!</h1>
</ps:snippet>
</ps:pagesnippets>- Include
pageSnippets2.jsin your HTML file. (Note that the previous version 'pageSnippets.js' is deprecated and will be discontinued.)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pageSnippets Demo</title>
<meta charset="utf-8" />
<script src="https://suppenhuhn79.github.io/pagesnippets/pagesnippets2.js"></script>
</head>
</html>- Have a short script that imports the snippet file. Produce the snippet and place it in the document.
<body>
<script>
pageSnippets.import("snippet.xml").then(() => document.body.appendChild(pageSnippets.produce("hello")));
</script>
</body>
</html>You're done.
Of course there's more! Unleash its full power with placeholders, conditions, lists and much more. Find a full reference in the wiki.
pageSnippets is licensed under the Apache License, Version 2.0.