How to add elements to different <li>-CodePudding

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 ></li>
  <label for="checkbox00">Option 0</label>
  <input type="checkbox" id="checkbox00" />
  <li ></li>
  <label for="checkbox01">Option 1</label>
  <input type="checkbox" id="checkbox01" />
</ul>

And I want it to look like this:

<ul>
  <li >
    <label for="checkbox00">Option 0</label> <input type="checkbox" id="checkbox00" />
  </li>
  <li >
    <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);

CodePudding user response：

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)

CodePudding user response：

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 >
      <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>

Additional documentation