Created
July 21, 2017 21:01
-
-
Save ideaflare/5cfe17e0c6f62e6706a7fc7704a84fef to your computer and use it in GitHub Desktop.
Create custom element and style it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id="container" style="padding: 20px; border: 1px dashed grey;"> | |
| <div>Don't replace this.</div> | |
| <custom-button></custom-button> | |
| <div>Don't replace this either.</div> | |
| </div> | |
| <script> | |
| var custom_button_html = | |
| ' <button>' + | |
| ' Custom ' + | |
| ' </button>' | |
| let updateTags = (newHtml, tag) => { | |
| let elements = document.getElementsByTagName(tag.toUpperCase()) | |
| Array.from(elements).forEach((e) => { | |
| // insert the new element just before <x> | |
| e.insertAdjacentHTML('beforeBegin', newHtml); | |
| // now e's previousSibling should be the newly added element | |
| var new_elem = e.previousSibling; | |
| // get rid of e | |
| e.parentElement.removeChild(e); | |
| new_elem.style.background = 'palegreen'; | |
| }) | |
| } | |
| updateTags(custom_button_html,'custom-button'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment