0
211
ViewsWhy does `document.createElement` do not allow the creation of self-closing tags?
Example JavaScript
<html>
<body>
<form id="test"></form>
</body>
</html>
let input_el = document.createElement('input');
input_el.setAttribute('type','text');
input_el.setAttribute('name','your_name');
let my_form = document.getElementById('test');
my_form.prepend(input_el);
Produces the following output in the chrome developer tools on windows (chrome version 96.0.4664.45):
And not the correct form:
<input type="text" name="your_name">
Also see this fiddle: https://jsfiddle.net/m1fqzLv6/
For now I did not found any javascript function which would allow this.
1 answers
Answer question0
This question is based on the assumption that document.createElement() would produce HTML code. This is incorrect.
Actually, the HTML code is parsed into a document object model (DOM). JavaScript can subsequently modify the DOM (also see comments from T.J. Crowder above). In your example, an <input> element is added.
Chrome, in its developer tool, represent the DOM by HTML code that most developers can easily read. And if there is an <input> element in the DOM, the devtools panel has to decide how to represent it. Apparently, it chooses the long form with <input></input>. This, however is only an output decision.