Custom Element replace button

by stopsatgreen

HTML

<template id="newButton">
    <button>Submit Two</button>
</template>
<form method="post">
    <input type="hidden" value="bums" />
    <button id="button">Submit</button>
</form>

JavaScript

// Register new element, add method
var myProto = Object.create(HTMLButtonElement.prototype);
myProto.arses = function () {
    console.log('Arses!!!');
}
document.registerElement('my-button', {prototype: myProto});
// Create new element, insert template contents
var btn = document.getElementById('button');
var myBtn = document.createElement('my-button');
var newBtn = document.getElementById('newButton');
var clone = document.importNode(newBtn.content, true);
myBtn.appendChild(clone);
// Replace existing element
var myForm = document.forms[0];
myForm.replaceChild(myBtn,btn);
// Submit form (for testing)
myForm.onsubmit = function (e) {
    e.preventDefault();
    console.log(e);
}