How can I dynamically create script element and set src attribute value?-CodePudding

I have the following embed codes which loads online form:

<script type="text/javascript" src="https://form.jotform.com/jsform/222233362971049"></script>

It allows to prepopulate form fields using URL parameters, so if I set src attribute to

https://form.jotform.com/jsform/222233362971049?questionOne=Answer1

it will have those fields filled with provided values. Now my goal is to dynamically create a script element and set the src value using that link (https://form.jotform.com/jsform/222233362971049?questionOne=) concatenated with the value from my local variable.

I tried using document.write approach but it does not fit my requirements since it does not allow to specify where the created element will be added (i.e. to specify parent element for instance):

var userId = "user123";
var populUrl = "https://form.jotform.com/jsform/222233362971049?questionOne=";
var x = populUrl userId;
  document.write("<script type='text/javascript' src='"  x   "'><\/scr"   "ipt>");

Any ideas for alternative approaches will be extra helpful.

CodePudding user response：

As this script will manipulate the DOM it would better to create it and append to the body, after the DOM has been loaded.

const newScript = document.createElement('script')
newScript.src = "https://form.jotform.com/jsform/222233362971049"
document.body.appendChild(newScript)

CodePudding user response：

As Jaromanda X Said, You should use document.createElement('script') and instead of document.write() you should append your script to the supposed element.

You should avoid using document.write().

I don't know what you want to do specifically, but I think you want to have multiple jotforms on your page!

I don't know how jotform works, but you may try to append each script to the appropriate DOM element.

const scriptOne = document.createElement('script'); 
scriptOne.src="whateveryouwant";
const parent = document.getElementById('element-parent');

parent.appendChild(scriptOne);

You may try this and see if this solves your problem!

CodePudding user response：

First, you want to have a infinite loop, you can use setInterval(() => {code}, eachLoopWaitingMilliseconds) to do infinite looping

Second, you want to create the script element. Then we will define our script tag first by using var scriptTag = document.createElement(“script”);.

Next, we will set the attributes of the tag by using scriptTag.src = yourScriptSrcLink.

Finally add it to the document body by using document.body.appendChild(scriptTag).

==================================================================

Whole code:

     setInterval(() => { // infinite loop
          var scriptTag = document.createElement(“script”) // create the script tag
          scriptTag.src = “ https://form.jotform.com/jsform/222233362971049” // set the script src
          document.body.appendChild(scriptTag) // add it to the document
     })

*1: Better / improvement If you want to make our console cleaner, and you don’t want to see the script tags. You can create a parent div and the parent div contains all scripts tags, so that you can just hide up the parent tag then everything is fine :D So it is like this:

     var parent = document.createElement(“div”); // define the parent
     document.body.appendChild(parent) // add the parent div to the document first

     setInterval(() => { // infinite loop
          var scriptTag = document.createElement(“script”) // create the script tag
          scriptTag.src = “ https://form.jotform.com/jsform/222233362971049” // set the script src
          parent.appendChild(scriptTag) // add it to the parent
     })

That’s all :D