How to load HTML file into HTML use JS with button-CodePudding

I what to load the b.js file to HTML with button and function. when user type "yes" and click on "Ok" button, "b.js" must load in page (not open in new window or new tab)

what code I must to use in ??????????? place to solve my problem? here is the code:

HOME.html

<html>
<head>
</head>
<body>
<form name="load">yes OR no<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
<script>
function my(form) {
    if (form.id.value=="yes") {              

?????????????
   
        } else {
            alert("NO")
        }
}
</script>
</body>
</html>

b.js

document.write(`

<html>
<h1> Load the HTML code</h1>
</html>

`);

I tried to use <script src="b.js"></script> but this code immediately load "b.js" that I dont what this

I tried to use

var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','b.js');
document.head.appendChild(scriptTag)

but not working

I tried to use

document.getElementsByTagName('body')[0].innerHTML  = "<script src='b.js'></script>";

but this code not working

what can I do to load the "b.js" file after click on button?

thanks :)

CodePudding user response：

move this part of your code

var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','b.js');
document.head.appendChild(scriptTag)

where the ????????????? is in your HOME.html file.

The rest of your code seems fine, if a little disjointed.

CodePudding user response：

Is this what you're looking gor?

function my(form) {
  const loadHTML = () => {
    const scriptB = document.createElement('script')
    scriptB.setAttribute('src','b.js')
    console.log(scriptB)
    document.write(`
      <h1>Load the HTML code</h1>
      ${scriptB.outerHTML}
    `);
  }
  if (form.id.value==="yes") {
    loadHTML()
  } else {
    alert("NO")
  }
}

<html>
<head>
</head>
<body>
<form name="load">
  <h2>YES or NO</h2>
  <input name="id" type="text">
  <input type="button" value="OK" onClick="my(document.forms.load)">
</form>
</body>
</html>