Programatically change an HTML Tags Angle Bracket to `<` Text Character

I need to convert some HTML to text and show the HTML tags as code, in other words have a <div> show with the angle brackets and appear on screen as <div>. I know to do this I have to switch the angle brackets to < and >

Is there anyway of doing this programmatically with JavaScript? I've included some pseudo code below in terms of how you'd do this is if it was a string, but I need to find out how to convert the HTML tags to strings?

Codepen: https://codepen.io/emilychews/pen/KKpqoww

Any assistance would be awesome

// PSEUDO CODE

var codeHTML = document.getElementsByClassName('code-html')

for (var i = 0; i < codeHTML.length; i+=1) {

    codeHTML[i].replace('<', '&lt;')
}

<code class="code-html"><div></code>
Hi<code class="code-html"></div></code>