Here is one way to dynamically create HTML hidden input fields via Javascript:

/*
   Adds an html hidden input field (dynamically created) to the given HTML form element.
   @param formElement the given HTML form element
   @param fieldName the name of the hidden input field
   @param fieldValue the (string) value of the hidden input field
*/
addHiddenInputField(formElement, fieldName, fieldValue) {
   var inputElement = document.createElement("input")
   inputElement.setAttributeNode(createHtmlAttribute("type", "hidden"))
   inputElement.setAttributeNode(createHtmlAttribute("name", fieldName))
   inputElement.setAttributeNode(createHtmlAttribute("value", fieldValue))
   formElement.appendChild(inputElement)
   return
}
/*
   Creates an html attribute.
   @param name the name of the attribute.
   @param value the (string) value of the attribute.
   @return the newly created html attribute
*/
createHtmlAttribute(name, value) {
   var attribute = document.createAttribute(name)
   attribute.nodeValue = value
   return attribute
}

What if you want to to dynamically create a form ? Here you go:

/*
   Adds an html form (dynamically created) to the HTML body element (assuming it exists.).
   @param actionValue action string
   @return the newly created HTML form element.
*/
addHtmlForm = function(actionValue) {
   var formElement = document.createElement("form")
   formElement.method = "POST"
   formElement.action = actionValue
   var body = document.getElementsByTagName("body")[0]
   body.appendChild(formElement)
   return formElement
}