Issue in JavaScript on IE9: SCRIPT5022 error: DOM Exception - INVALID_CHARACTER_ERR (5)

I am encountering an error with the following line of code:

var input2 = document.createElement('<input name=\'password\' type=\'password\' id=\'password\' onblur=\'checkCopy(this)\' onkeyup=\'return handleEnterSubmission(this.form,event)\'  maxlength=\'16\' autocomplete=\'off\' onfocusin=\'checkValue(this.value, this.id);setMarginInIE();\' />');

This code works perfectly in IE8 but is causing issues in IE9. Can you please help me identify the problem?

Answer №1

Your code is problematic mainly because it seems that you have not taken the time to review the documentation for document.createElement(). The documentation (for instance, available here) clearly outlines the proper usage of this function.

Highlighted in the documentation:

var element = document.createElement(tagName);
  • element represents the newly created element object.
  • tagName should be a string specifying the type of element to be created. The nodeName of the new element will be set as per the value of tagName.

It's crucial to note that createElement does not accept complete HTML strings, only tag names like this:

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

If you need to generate a block of HTML, you should use a function like this:

function createElementFromHTML(html) {
  var temp = document.createElement('DIV');
  temp.innerHTML = html;
  return temp.childNodes[0];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

Ember - connecting to a JSON data source

Recently, I have been following a tutorial/example from codeschool and everything is going well. However, the example code includes the line: App.ApplicationAdapter = DS.FixtureAdapter.extend(); Now, I want to maintain all the existing functionality but ...

What is the method for retrieving a temporary collection in a callback function when using node-mongodb-native find()?

Is it possible to retrieve a temporary collection from a find() operation instead of just a cursor in node-mongodb-native? I need to perform a mapReduce function on the results of the find() query, like this: client.open(function(err) { client.collect ...

Updating view with *ngIf won't reflect change in property caused by route change

My custom select bar has a feature where products-header__select expands the list when clicked. To achieve this, I created the property expanded to track its current state. Using *ngIf, I toggle its visibility. The functionality works as expected when cli ...

Drawer in Material-UI has whitespace remaining at the corners due to its rounded edges

While using the Material UI drawer, I attempted to round the corners using CSS: style={{ borderRadius: "25px", backgroundColor: "red", overflow: "hidden", padding: "300px" }} Although it somewhat works, the corners appear white instea ...

Calling this.$refs.upload.submit() is not providing the expected response from Element-UI

Currently working with element-ui and attempting to upload a file using the following code: this.$refs.upload.submit(); Is there a way to retrieve the response from this.$refs.upload.submit();? I have attempted the following: .then(response => { t ...

Using Regular Expressions in Express routing

Does anyone have experience serving a file with a dynamic hash in its name on a specific route? The file is named like workbox-someHash.js and the hash changes every time the app is deployed. I attempted to serve it using the following code snippets: &qu ...

Attempting to collapse the offcanvas menu in React Bootstrap by clicking on a link

Currently, I am utilizing a mix of React Bootstrap and React to develop a single-page application. In an attempt to make the Offcanvas menu close when clicking a link, I have experimented with various approaches. One method involved creating an inline scri ...

What is the best way to switch between search results shown in an li using AngularJS?

Looking for a way to toggle a list that appears when a user searches in my app. I want the search results to hide when the search bar is closed. How can I achieve this? I think Angular might be the solution, but I'm stuck on how to implement it. I tri ...

What is the best way to retrieve data from multi-dimensional JSON structures?

Looking to extract specific values from my JSON file. console.log( objects.assignments.header.report_type ); I need to display HOMEWORK Javascript $.ajax({ url: "/BIM/rest/report/assignment", type: "POST", dataTyp ...

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Can anyone help me with coding to make a div appear on a website after a specific amount of time? Here's an example of what I'm trying to achieve: <div class="container"> <div class="secretpopout"> This is the hidden div that should ...

Utilize the onClick event to access a method from a parent component in React

Looking for guidance on accessing a parent component's method in React using a child component? While props can achieve this, I'm exploring the option of triggering it with an onClick event, which seems to be causing issues. Here's a simple ...

What are the reasons for validation failure when it is moved into a method?

I am currently in the process of developing a validation function in JavaScript. However, when I extracted the logic into a private method, my validation started failing and I can't seem to figure out why. Here is my HTML definition: <input type= ...

Looking to save a CSS element as a variable

I am working on improving the readability of my code in Protractor. My goal is to assign a CSS class to a variable and then use that variable within a click method. element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")).cl ...

Even after defining routes, Node Express continues to throw a 404 error

It appears that troubleshooting this issue may be challenging without providing more context. Here is the setup I have in a compact modular configuration: //index.js also known as the server ... // defining views path, template engine, and default layou ...

What is the best way to determine if the form has been submitted?

I am working on a React form and need to determine when the form has been successfully submitted in order to trigger another request in a separate form. const formRef = React.useRef<HTMLFormElement>(null); useEffect(() => { if (formRef &a ...

Working on executing various methods with a JavaScript client on a Flask RESTful API that requires authentication

I'm currently developing a JavaScript client-side app to interact with a Flask RESTful API. I've implemented some methods that require user authentication, but for some reason, even after logging into the server, I receive a 401 error (Unauthoriz ...

Implementing a Popover Notification When Clicked

I'm a beginner at this. I came across an example of a popover message box in the link provided below. I attempted to implement it, but for some reason, it's not working. Could I be overlooking something? Alternatively, is there a simpler way to ...

Using this PHP function

I am facing an issue with a table that contains some information. I want to be able to click on a specific row (e.g. the second row) and display all the corresponding database information. However, I am unsure how to achieve this using the $this function ...

modify the structure of an object according to specific conditions

So, I have this object that looks like the following. I'm currently working on restructuring the object based on the parent and child relationship. var b = []; for(var i=0;i<a.length;i++){ if(a[i].parent == null){ const children = a.filter(x => ...