如何将元素添加到不同的＆lt; li＆gt;

发布于 2025-02-11 20:08:00 字数 1475 浏览 0 评论 0原文

我有这个代码，有一个问题和许多选项。我有一个无序的列表ul，我正在尝试在该列表中所有li中的所有内容，其中每个都包含一个选项名称和复选框。

我的代码目前添加li，但它添加了复选框及其下的名称，而不是其中。

看起来像这样。

<ul>
  <li class="optionName"></li>
  <label for="checkbox00">Option 0</label>
  <input type="checkbox" id="checkbox00" />
  <li class="optionName"></li>
  <label for="checkbox01">Option 1</label>
  <input type="checkbox" id="checkbox01" />
</ul>

我希望它看起来像这样：

<ul>
  <li class="optionName">
    <label for="checkbox00">Option 0</label> <input type="checkbox" id="checkbox00" />
  </li>
  <li class="optionName">
    <label for="checkbox01">Option 1</label> <input type="checkbox" id="checkbox01" />
  </li>
</ul>

我正在添加HTML的代码看起来像这样：

var option = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('label');
var checkBoxId = 'checkbox' + '' + questionNumber + subquestionNumber;
checkbox.type = 'checkbox';
checkbox.id = checkBoxId;
option.className = 'optionName';
label.htmlFor = checkBoxId;
checkBoxId.htmlFor = option;
label.appendChild(document.createTextNode('Option ' + subquestionNumber));
q.appendChild(option);
q.appendChild(label);
q.appendChild(checkbox);

原文

I have this code where there is a question and many options.
I have an unordered list ul and I am trying to all in that list many li where each one will contain a option name and a checkbox.

My code for the moment add the li but it add the checkbox and the name under it and not in it.

It looks something like this.

<ul>
  <li class="optionName"></li>
  <label for="checkbox00">Option 0</label>
  <input type="checkbox" id="checkbox00" />
  <li class="optionName"></li>
  <label for="checkbox01">Option 1</label>
  <input type="checkbox" id="checkbox01" />
</ul>

And I want it to look like this:

<ul>
  <li class="optionName">
    <label for="checkbox00">Option 0</label> <input type="checkbox" id="checkbox00" />
  </li>
  <li class="optionName">
    <label for="checkbox01">Option 1</label> <input type="checkbox" id="checkbox01" />
  </li>
</ul>

My code where I am adding the html looks like this:

var option = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('label');
var checkBoxId = 'checkbox' + '' + questionNumber + subquestionNumber;
checkbox.type = 'checkbox';
checkbox.id = checkBoxId;
option.className = 'optionName';
label.htmlFor = checkBoxId;
checkBoxId.htmlFor = option;
label.appendChild(document.createTextNode('Option ' + subquestionNumber));
q.appendChild(option);
q.appendChild(label);
q.appendChild(checkbox);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑咖 2025-02-18 20:08:00

您应该调用appendchild on option而不是q

var option = document.createElement('li');
        var checkbox = document.createElement('input');
        var label = document.createElement('label')
        var checkBoxId = "checkbox" + "" + questionNumber + subquestionNumber;
        checkbox.type = "checkbox";
        checkbox.id = checkBoxId;
        option.className = "optionName";
        label.htmlFor = checkBoxId;
        checkBoxId.htmlFor = option;
        label.appendChild(document.createTextNode('Option ' + subquestionNumber));
        option.appendChild(label); //add `label` to `li`
        option.appendChild(checkbox); //add `checkbox` to `li`
        q.appendChild(option)

You should call appendChild on option instead of q

var option = document.createElement('li');
        var checkbox = document.createElement('input');
        var label = document.createElement('label')
        var checkBoxId = "checkbox" + "" + questionNumber + subquestionNumber;
        checkbox.type = "checkbox";
        checkbox.id = checkBoxId;
        option.className = "optionName";
        label.htmlFor = checkBoxId;
        checkBoxId.htmlFor = option;
        label.appendChild(document.createTextNode('Option ' + subquestionNumber));
        option.appendChild(label); //add `label` to `li`
        option.appendChild(checkbox); //add `checkbox` to `li`
        q.appendChild(option)

回复收藏 0 原文

没有伤那来痛 2025-02-18 20:08:00

顺便说一句，您可能会发现使用更容易可视化。

我创建了一个函数，您可以将问卷和subquestionnumber参数传递。该功能使用这些参数返回一些HTML。

如果您然后使用querySelector拾取ul元素，则可以使用insertadjacenthtml将调用该函数调用的结果添加到列表中。

function getHTML(questionNo, subQuestionNo) {

  const id = `${questionNo}${subQuestionNo}`;

  return html = `
    <li class="optionName">
      <label for="checkbox${id}">
        Option ${questionNo}.${subQuestionNo}
      </label>
      <input type="checkbox" id="checkbox${id}">
    </li>
  `;

}

// Get the `ul` element
const ul = document.querySelector('ul');

// Add new HTML to the `ul` element by calling the
// `getHTML` function with the `questionNumber` and
// `subQuestionNumber` arguments.
ul.insertAdjacentHTML('beforeend', getHTML(0, 0));
ul.insertAdjacentHTML('beforeend', getHTML(0, 1));
ul.insertAdjacentHTML('beforeend', getHTML(1, 1));

<ul></ul>

附加文档

Just as an aside you may find working with template strings easier to visualise.

I've created a function into which you can pass the questionNumber and subquestionNumber arguments. The function returns some HTML using those arguments.

If you then use querySelector to pick up the ul element, you can then use insertAdjacentHTML to add the result of calling the function to the list.

function getHTML(questionNo, subQuestionNo) {

  const id = `${questionNo}${subQuestionNo}`;

  return html = `
    <li class="optionName">
      <label for="checkbox${id}">
        Option ${questionNo}.${subQuestionNo}
      </label>
      <input type="checkbox" id="checkbox${id}">
    </li>
  `;

}

// Get the `ul` element
const ul = document.querySelector('ul');

// Add new HTML to the `ul` element by calling the
// `getHTML` function with the `questionNumber` and
// `subQuestionNumber` arguments.
ul.insertAdjacentHTML('beforeend', getHTML(0, 0));
ul.insertAdjacentHTML('beforeend', getHTML(0, 1));
ul.insertAdjacentHTML('beforeend', getHTML(1, 1));