Input in a label created via javascript is not checked-CodePudding

My html and Javascript is as below:

const container = document.getElementById('container')

const label = document.createElement('label')
const input = document.createElement('input')

input.type = 'checkbox'
input.checked = true

label.appendChild(input)
label.innerHTML  = 'This is a label'

container.appendChild(label)

<html>

<body>
    <div id = 'container'></div>
</body>

</html>

The result is that I just get an unchecked checkbox in the label. However, if I remove the label from the equation and just append the input to the container, then it is pre-checked as expected. How come setting input.checked = true has no effect when the input is in a label?

const container = document.getElementById('container')

const input = document.createElement('input')

input.type = 'checkbox'
input.checked = true

container.appendChild(input)

<html>

<body>
  <div id='container'></div>
</body>

</html>

CodePudding user response：

The line:

label.innerHTML  = 'This is a label'

takes your existing innerHTML and re-writes it, destroying any (non-delegated) event-handlers or existing properties.

If, instead of label.appendChild(), you use:

label.append(input, 'This is a label');

Then it works to add the text as well as the <input> to the <label>:

const container = document.getElementById('container')

const label = document.createElement('label')
const input = document.createElement('input')

input.type = 'checkbox'
input.checked = true

label.append(input, 'This is a label');

container.appendChild(label)

<div id='container'></div>

References:

Element.append().

CodePudding user response：

In place of using innerHTML, which doesn't work well when adding siblings since it destroys and recreates the parent element, it's better using appendChild and add the sibling as a TextNode:

const container = document.getElementById('container')

const label = document.createElement('label')
const input = document.createElement('input')

input.type = 'checkbox'
input.checked = true

label.appendChild(input)
label.appendChild(document.createTextNode("This is a label")); 

container.appendChild(label)

<html>
<body>
<div id = 'container'></div>
</body>
</html>

This will also prevent script injection whether you'll decide, in the future, to allow users decide the label.

CodePudding user response：

You're missing a ";" after each line, so that is a problem.