title: Modal popup with dynamic content drops style/script
body: <p>I am trying to display a modal popup that has some raw xml in it but when the xml is populated within the popup, the styles drop. The xml is loaded dynamically depending on which button requests the xml. My suspicions are that the script which loads the style is no longer available to the modal at the time of the click event, or maybe the depricated <code>&lt;xmp&gt;</code> tags. The pretty-print script I'm using works fine within the xmp, just not in the popup.</p>
  
  <p>I have a modal popup that follows
  <a href="https://www.w3schools.com/howto/howto_css_modals.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_modals.asp</a>.</p>
  
  <p>I am styling xml content in the modal using <a href="https://github.com/google/code-prettify/blob/master/README.md" rel="nofollow noreferrer">pretty print</a> linked via cdn in <code>&lt;head&gt;&lt;/head&gt;</code>.</p>
  
  <p>I am dynamically displaying raw xml in this modal when a corresponding button is pressed:</p>
  
  <pre><code>&lt;button class="expand" onclick="expand('0')"&gt;Expand Data&lt;/button&gt;
  &lt;button class="expand" onclick="expand('1')"&gt;Expand Data&lt;/button&gt;
  
  &lt;div id="xmlBox" class="xmlBox"&gt;
        &lt;div class="expandContent"&gt;
          &lt;span class="close"&gt;CLOSE&lt;/span&gt;
          &lt;pre  class="prettyprint"&gt;
              &lt;xmp class="xml"&gt;&lt;/xmp&gt;
          &lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script&gt;
  var formattedXML = "&lt;xml&gt;text&lt;/xml&gt;";
  var formattedXML1 = "&lt;xml&gt;text1&lt;/xml&gt;";
  var arr = [formattedXML,formattedXML1];
  
  function expand(i) {    
      document.getElementById("xmlBox").style.display = "block";
      document.getElementsByClassName("xml")[0].innerHTML=arr[i];
  }
  &lt;/script&gt;
  </code></pre>