Tengo este código donde hay una pregunta y muchas opciones. Tengo una lista desordenada ul y estoy tratando de que todos en esa lista tengan muchos li donde cada uno contendrá un nombre de opción y una casilla de verificación.
Mi código por el momento agrega el li pero agrega la casilla de verificación y el nombre debajo y no en él.
Se parece a esto.
<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>Y quiero que se vea así:
<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>Mi código donde estoy agregando el html se ve así:
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);Debe llamar a appendChild en la option en lugar de 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)Como comentario aparte, puede que le resulte más fácil visualizar el trabajo con cadenas de plantillas .
Creé una función en la que puede pasar los argumentos questionNumber y subquestionNumber . La función devuelve algo de HTML usando esos argumentos.
Si luego usa querySelector para seleccionar el elemento ul , puede usar insertAdjacentHTML para agregar el resultado de llamar a la función a la lista.
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>Documentación adicional