marc,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn-msg">Show message</button>
<button id="btn-generate">Generate item</button>
<p><strong id="tag">Tag:</strong></p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
window.addEventListener("DOMContentLoaded", function() {
var ul = document.querySelector("ul"),
btn = document.querySelector("#btn-generate");
btn.addEventListener("click", function(e) {
ul.dispatchEvent(myEvent);
});
ul.addEventListener("addItem", function(e) {
this.appendChild(e.detail.li);
});
var myEvent = new CustomEvent("addItem", {
detail: {
counter: 2,
get li() {
var node = document.createElement("li");
node.appendChild(document.createTextNode("Item " + ++this.counter));
return node;
}
},
bubbles: true,
cancelable: false
});
});
</script>
</body>
</html>