将嵌套输入和标签添加到 div

Question

我正在尝试使用 JavaScript 添加一个 div，其中一个输入和标签，在正文的 div 内。 JavaScript 中的颜色变量最终将存在于文件中的其他位置，但我将其添加到此处以便代码和标签的来源变得有意义。所以基本上 sudo 代码看起来像这样...

div (that's already in the body)
   div (from JS)
      input (from JS)
      label (from JS)
   </div>

这是我目前所拥有的JSFiddle，代码也如下所示

HTML

<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
  </head>
  <body onload="buildTheColors()">
  <form id="colorChoose">
  <div class="firstBox">
  <br>
    <div id="mainContainer">
    </div>
  </div>
  </form>
  </body>
  </html>

JavaScript

var toAdd = document.createDocumentFragment();

var colors = [ 
['Dark Grey', 'dark_grey', '#4d4d4d'],
['Medium Grey', 'medium_grey', '#717171'],
['Medium Dark Grey', 'medium_dark_grey', '#9a9a9a'],
['Default Grey','light_grey','#c1c1c1'],
['47th Shade of Grey', 'lighter_grey', '#e0e0e0'],

for (var i = 0; i < colors.length; i++) {

  var newDiv = document.createElement('div');
  var newInput = document.createElement('input');
  var newLabel = document.createElement('LABEL');

    newDiv.class = 'radio-item';

    newInput.type = "radio";
    newInput.id = 'I'+colors[i][1];
    newInput.name = "colorsman";
    newInput.value = colors[i][1];


    newLabel.style.background = colors[i][2];

    newDiv.appendChild(newInput);
    newDiv.appendChild(newLabel);

    toAdd.appendChild(newDiv);

   }
document.getElementById('mainContainer').appendChild(toAdd);

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 11px;
  left: 12px;
  content: " ";
  display: block;
  background: #004c97;
}

Answer 1

您没有提出问题，但是您的 fiddle 包含错误：

没有buildTheColors()功能
你的 var colors = [ 缺少结尾 ];

如果你解决了这个问题，你会看到无线电输入出现。

Answer 2

给你！

更新了我的回答

var toAdd = document.createElement("div");

    var colors = [ 
    ['Dark Grey', 'dark_grey', '#4d4d4d'],
    ['Medium Grey', 'medium_grey', '#717171'],
    ['Medium Dark Grey', 'medium_dark_grey', '#9a9a9a'],
    ['Default Grey','light_grey','#c1c1c1'],
    ['47th Shade of Grey', 'lighter_grey', '#e0e0e0']]

    for (var i = 0; i < colors.length; i++) {
      var newDiv = document.createElement('div');
      var newInput = document.createElement('input');
      var newLabel = document.createElement('LABEL');

        newDiv.className = 'radio-item';

        newInput.type = "radio";
        newInput.id = 'I'+colors[i][1];
        newInput.name = "colorsman";
        newInput.value = colors[i][1];


        newLabel.style.color = colors[i][2];
        newLabel.innerText=colors[i][0];
        newLabel.setAttribute("for",'I'+colors[i][1]);

        newDiv.appendChild(newInput);
        newDiv.appendChild(newLabel);

        toAdd.appendChild(newDiv);

       }
    document.getElementById('mainContainer').appendChild(toAdd);

.radio-item {
      display: inline-block;
      position: relative;
      padding: 0 6px;
      margin: 10px 0 0;
    }

    .radio-item input[type='radio'] {
      display: none;
    }

    .radio-item label {
      color: #666;
      font-weight: normal;
    }

    .radio-item label:before {
      content: "";
      display: inline-block;
      position: relative;
      top: 5px;
      margin: 0 5px 0 0;
      width: 20px;
      height: 20px;
      border-radius: 11px;
      border: 2px solid #004c97;
      background-color: transparent;}

    .radio-item input[type=radio]:checked + label:after {
      border-radius: 11px;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 11px;
      left: 12px;
      content: " ";
      display: block;
      background: #004c97;
    }

<html>
      <head>
        <base target="_top">
        <?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
      </head>
      <body>
      <form id="colorChoose">
      <div class="firstBox">
      <br>
        <div id="mainContainer">
        </div>
      </div>
      </form>
      </body>
      </html>

将嵌套输入和标签添加到 div

Add nested input and label to a div

html

javascript

css

appendchild

HTML

JavaScript

CSS