How to force Google Translate to translate text between <code.....> and </code> tags on my webpage? [closed]

How do I force Google Translate to translate text inside <code> tags on my webpage?

I read online that the <code tag can be replaced with a <span tag and then reverted after allowing google translate to translate that text but I don't know how to replace the tag after the translation (but the translation is done)

I tried using the following code snippet first (without replacing the <code tag with <span):

Javascript

<div id="google_translate_element"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Get a reference to the code element
const codeElement = document.getElementById('myCodeElement');

// Change the translate attribute to "yes"
if (codeElement) {
  codeElement.setAttribute('translate', 'yes');
  console.log("Translate attribute changed to 'yes'.");
} else {
  console.log("Element with ID 'myCodeElement' not found.");
}
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}

HTML

<p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent;"><code id="myCodeElement" translate="no" style="background-color: transparent;"><strong>Disclaimer</strong></code>:&nbsp;None of the above mentioned are being recommended or, "prescribed" for use by others.</p>

This javascript allows the translation by setting the attribute to span (replacing code with span) but no attribute reversal is happening after the Google translation (to change the span back to code):-

<div id="google_translate_element"></div>
<script type="text/javascript">
// Store original content
document.addEventListener('DOMContentLoaded', function() {
        var codeElements = document.querySelectorAll('code');
        codeElements.forEach(function(element) {
            var span = document.createElement('span');
            span.innerHTML = element.innerHTML;
            span.setAttribute('data-original-tag', 'code'); // Store original tag
            element.parentNode.replaceChild(span, element);
        });
        // Initialize Google Translate here
        // new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    });
function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
function revertSpanAttribute() {
    // Find all span elements that have the 'data-original-tag' attribute set to 'code'
    var elements = document.querySelectorAll('span[data-original-tag="code"]');

    // Iterate through the found elements
    for (var i = 0; i < elements.length; i++) {
        // Remove the specific attribute from each element
        elements[i].removeAttribute('data-original-tag');
    }
}
</script>

Google suggested to use this javascript but this also does not revert that replacement (<code to <span replacement) after the Google translation:-

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

  // Add a delay to ensure Google Translate widget has finished processing
  setTimeout(function() {
    // Select all elements that have your custom attribute
    const translatedSpans = document.querySelectorAll('span[data-original-tag="code"]');

    translatedSpans.forEach(span => {
      // Create a new 'code' element
      const codeElement = document.createElement('code');

      // Copy content and attributes from the span to the new code element
      codeElement.innerHTML = span.innerHTML;
      // Note: Other attributes might need manual copying if applicable,
      // but innerHTML is usually sufficient for simple content.

      // Replace the span with the original code element
      span.parentNode.replaceChild(codeElement, span);
    });

  }, 500); // 500 milliseconds (0.5 seconds) delay
}