Как добавить метку или текст в динамически добавленный флажок?

Question

Проблема

Как динамически добавить метку к своему флажку? Приведенный ниже код отображает флажок, но не метку. Для контекста я создаю расширение Chrome.

Изображение флажка, без метки

Код

• Вскрипт содержимого

  var check = document.createElement("input");
        check.id = "checkbox1";
        check.type = "checkbox";
        check.style.marginLeft = "10%";
        check.style.marginBottom = "10%";
        check.style.marginTop = "-8%";
        check.innerHTML = "Goal Accomplished";//THIS TEXT DOES NOT APPEAR.
          //if the checkbox is clicked, remove the sticky note.
        check.href="javascript:removeSticky()"
        check.addEventListener('change', () => {
              if (check.checked) {
                  removeSticky();
              } else {
                  // nothing
              }
        });
  
          //appending the checkbox to the sticky note div
        document.getElementById("sticky").append(check);
  
  
          //trying to add a label to the checkbox, which does not work.
        var newlabel = document.createElement("label");
        newlabel.innerHTML = "Here goes the text";
        newlabel.color = "black";
        document.getElementById("checkbox1").append(newlabel);//THIS RESULTS IN NOTHING
  
        document.body.append(newlabel);//To test if the label has been made.
  

  • Результат:

Изображение результата последней строки кода

Answer 1

Работай! Ключ должен был не добавляться к флажку, а к родительскому элементу div.

            var checkSpan = document.createElement("span");
                checkSpan.id="checkSpan";
                checkSpan.style.position = "absolute";
                checkSpan.style.display = "inline-block";
                checkSpan.style.float = "left";
                checkSpan.style.float = "left";

            document.getElementById("sticky").append(checkSpan);

            var labelSpan = document.createElement("span");
                labelSpan.id="labelSpan";

                labelSpan.style.display = "inline-block";

                labelSpan.style.marginLeft = "20%";
                labelSpan.style.marginBottom = "10%";

            document.getElementById("sticky").append(labelSpan);


              var check = document.createElement("input");
              check.id = "checkbox1";
              check.type = "checkbox";

              document.getElementById("checkSpan").append(check);

              var newlabel = document.createElement("label");
              newlabel.style.display = "inline";
              newlabel.innerHTML = "Goal Accomplished!";
              newlabel.style.marginBottom = "10%";
              document.getElementById("labelSpan").append(newlabel);