LINUX.ORG.RU

checkbox создается без текста при создании из JS

 ,


0

1
<html>
  <head>
    <script language="javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var input = document.createElement('input');

        //input.setAttribute('type', 'checkbox');
        input.type = 'checkbox';

        //input.textContent ='label';
        input.appendChild(document.createTextNode('label'));

        document.querySelector('#insertHere').appendChild(input);
      }, false);
    </script>
  </head>
  <body>
    <div id="insertHere"></div>
<!--<input type="checkbox">label</input>-->
  </body>
</html>


Если вписать чекбокс прямо в html, все в порядке. Тот же самый элемент создается из JS - и у него нет подписи справа. WTF? ЯННП.

А точно текстовая нода может быть у элемента типа <input>? Что, если создать например элемент <label>, и у него двух детей - input и textNode?

sholom ()

Шолом всё правильно сказал, у input не может быть контента; более того, у input и закрывающего тега не может быть, т.е. правильно записывать так: <input attributes... />. Ссылка:

Permitted content: None, it is an empty element.
Tag omission: Must have a start tag and must not have an end tag.

Обычно checkbox оборачивают в label:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS checkbox</title>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        var label = document.createElement('label');
        var checkbox = document.createElement('input');

        checkbox.type = 'checkbox';

        label.appendChild(checkbox);
        label.appendChild(document.createTextNode('label'));
        document.getElementById('insert-here').appendChild(label);
      });
    </script>
  </head>
  <body>
    <div id="insert-here"></div>
  </body>
</html>

Вот тебе ещё валидатор.

theNamelessOne ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.