<body> <div class="wrapper"> </div> </body>
const createDOMFromSring = (domstring) => { const div = document.createElement('div'); div.innerHTML = domstring; return div } class UpVoteButton { render() { this.elem = createDOMFromSring(` <button class='upvote-btn'> <span class='upvote-text'>Upvote</span> <span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> </button> `) return this.elem; } } class DownVoteButton { render() { this.elem = createDOMFromSring(` <button class="downvote-btn"> <span class="downvote-text">Downvote</span> <span><i class="fa fa-thumbs-down" aria-hidden="true"></i></span> </button> `) return this.elem } } // as render() method now returns an Object of HTMLDivElement // it cannot be appended like innerHTML, instead use DOM // API to append it const wrapper = document.querySelector(".wrapper"); const upVoteButton = new UpVoteButton(); wrapper.appendChild(upVoteButton.render()) const downVoteButton = new DownVoteButton(); wrapper.appendChild(downVoteButton.render())