Dynamically replace < and > with &lt; and &gt;

I try to make a simple JS function to dynamically replace < and > inside pre elements with < and >. Why it doesn't work?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let pres = document.querySelectorAll('pre');
for (pre in pres) {
  pre.textContent = pre.textContent.replace('<', '<');
  pre.textContent = pre.textContent.replace('>', '>');
}

<!-- language: lang-html -->

<pre>
foo <strong>bar</strong>
</pre>

<!-- end snippet -->

Later edit: What I actually want to achieve is that when I open a webpage, pre elements should display HTML markup literally, that is:

<!-- this is how html works! -->
foo <strong>bar</strong>

< is a special character in HTML. It represents the start of a tag, not a greater than sign in the text.

Consequently your HTML doesn’t have any < in the textContent, only in the innerHTML:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

for (const pre of document.querySelectorAll('pre')) {
  pre.textContent = pre.innerHTML;
}

<!-- language: lang-html -->

<pre>
foo <strong>bar</strong>
</pre>

<!-- end snippet -->

Another approach by replacing < and > with < and >, store it in result then wrapped in a code tag and assigned it back to the pre element.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let preEl = document.querySelector('pre');
let specialChars = {
  '<': '<',
  '>': '>'
}
let result = '<code>';
for (let chr of preEl.innerHTML) {
  if (specialChars[chr]) {
    result += specialChars[chr]
  } else {
    result += chr
  }
}
result += '</code>';
preEl.innerHTML = result

<!-- language: lang-html -->

<pre>
foo <strong>bar</strong>
</pre>

<!-- end snippet -->