Can I safely use document.createElement instead of forms[i].document.createElement('INPUT')?

Question

I'm supporting some legacy javascript.

In IE8 this worked:

var hi = forms[i].document.createElement('INPUT');

In IE 11 that code throws an exception.

"JavaScript runtime error: Unable to get property 'createElement' of undefined or null reference"

I think I can remove the forms[i] and safely do:

var hi = document.createElement('INPUT');

I've run the updated code and it appears to function correctly.

Can someone please confirm my assumption is correct.

The full function:

function setFormGotoURL(url) {
      var forms = PARENT.main.document.forms;
      if (forms!=null && typeof(forms)!="undefined" && forms.length>0) {
              for (var i=0;i<forms.length;i++) {
                if (forms[i].gotoURL) {
                        var gotoURL = forms[i].gotoURL;
                        if (gotoURL!=null && typeof(gotoURL)!="undefined") {
                            gotoURL.value=url;
                       }
                } //if
                else {
                    //var hi = PARENT.main.document.createElement('INPUT');
                    var hi = document.createElement('INPUT');
                    hi.setAttribute("type","hidden");
                    hi.setAttribute("name","gotoURL");
                    hi.setAttribute("value",url);
                    forms[i].appendChild(hi);
                }
              }
      }

}

Answer 1

From MDN

In an HTML document, the Document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized. In a XUL document, it creates the specified XUL element. In other documents, it creates an element with a null namespace URI.

MDN example:

document.body.onload = addElement;

function addElement () { 
  // create a new div element 
  var newDiv = document.createElement("div"); 
  // and give it some content 
  var newContent = document.createTextNode("Hi there and greetings!"); 
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

You create the element and assign it to a variable, then add it to wherever you want. var hi = forms[i].document.createElement('INPUT'); is incorrect code. anything.document will return null, because document is a stand-alone tag, not a property of an element, that is why it gives you the error Unable to get property 'createElement' of undefined or null reference", since null has no property createElement

I understand your confusion, but see that if you must create the element and then add it to the HTML, it would not matter to create the tag from the form, if you then have to specify where to add it too. I hope you understand it properly like that.