Add JavaScript code to an HTML page using JavaScript

I have an HTML form that takes field values to outputs custom instructions HTML & JavaScript instructions.

When the user fills the form and submits, JS code executes to inject the instructions at the bottom of the page. As soon as I include the <script>, the script "dies" and the button stops working. I don't understand what is going on.

Below is my code. Let me know if you need anything else.

<html>
<head>
    <script type="text/javascript">
        function formInfo(personalCode)
        {
            var instructionHttp = "<p># Step 1 - Add " + personalCode + "'s API</p><pre><script src='https://" + personalCode + ".customapi.com'></script></pre>";
            document.getElementById('returnedHtml').innerHTML = instructionHttp;
        }
    </script>
</head>
<body>
    <h1>Instructions Generator</h1>
    <form name="myform" action="" method="GET">
        <div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" value="" autofocus ><br>
        <input type="button" value="submit" onclick="
            code=document.myform.signupcode.value;
            formInfo(signupcode);"> <br>
    </form>
    <br><hr><br>
    <p>--- Customized Instructions ---</p>
    <br>
    <div id="returnedHtml"></div><br>
</body>

I have also tried replacing formInfo() with the following

    <script type="text/javascript">
        function formInfo(personalCode)
        {
            var pre1 = document.createElement('pre');
            var api = document.createElement('script');
            api.src = "https://" + personalCode + ".customapi.com";
            pre1.appendChild(api);

            var instructionHttp = "<p># Step 1 - Add " + personalCode + "'s API</p>";
            instructionHttp.appendChild(pre1);

            document.getElementById('returnedHtml').innerHTML = instructionHttp;
        }
    </script>

Solution

You tried to create html from string and just append to element, it's wrong, you must create elements as you did with script and pre.

This code will work for you:

<html>
    <head>
        <script type="text/javascript">
            function formInfo()
            {
               var personalCode = document.getElementById('signupcode').value
               var pre1 = document.createElement('pre');
               var api = document.createElement('script');
               api.src = "https://" + personalCode + ".customapi.com";
               pre1.appendChild(api);

               var instructionHttp = document.createElement('p');
               instructionHttp.innerHTML = "# Step 1 - Add " + personalCode + "'s API"

               instructionHttp.appendChild(pre1);

               document.getElementById('returnedHtml').innerHTML = instructionHttp.outerHTML;
           }
       </script>
   </head>
   <body>
       <h1>Instructions Generator</h1>
       <form name="myform" action="" method="GET">
           <div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" id="signupcode" value="" autofocus ><br>
           <input type="button" value="submit" onclick="formInfo()"> <br>
       </form>
       <br><hr><br>
       <p>--- Customized Instructions ---</p>
       <br>
       <div id="returnedHtml"></div><br>
   </body>
</html>