1

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>
user366818
  • 121
  • 4
  • 1
    See also here: https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list –  May 02 '22 at 12:36

3 Answers3

3

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:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
2

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.

Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
-3

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

Nenad Blagovcanin
  • 5
  • 3