Question

我具有此功能，每次单击复选框时都会调用onclick，但是由于某种原因，我无法将其添加到文档中。我已经将最后一行更改为一堆不同的东西，但是由于某种原因，我可以将其添加到文档中的唯一方法是使用document.body.appendChild（frag）;

我希望能够将其添加到特定位置，因此我尝试通过id获取事件的目标。还有更多的框，所以我想获取被单击框的ID并在其下添加元素，并且我的代码一直在尝试附加子级，实际上什么也没显示出来...我包括了其中一个复选框在我的html中。

<form id="lang" class="poll" onsubmit="langCheck()">
            <h1 class="background ulin center">What programming languages do you know?</h1>
            <input class="lbox" id = "box1" type="checkbox" value="Assembly" onclick="addSelect(this)">Assembly<br>
</form>

    function addSelect(e) {

      var target = document.getElementById(e.id);
      var lol = e.id;
      var frag = document.createDocumentFragment();

      var select = document.createElement('select');
      var optgroup = document.createElement('optgroup');
      var options = [
        document.createElement('option'),
        document.createElement('option'),
        document.createElement('option')
      ];

      //Define content for options
      optgroup.label = "Level of expertise?";
      options[0].value = "Beginner";
      options[1].value = "Intermediate";
      options[2].value = "Expert";

      frag.appendChild(select);
      select.appendChild(optgroup);
      //add all options to the optgroup node

      options.forEach(function(element) {
        optgroup.appendChild(element);
      });

      document.body.querySelector('#box1').appendChild(frag);
    }

Answer 1

输入元素不能有子级。如果要让片段出现在输入之后，则需要将其作为元素的同级插入文档中。不幸的是，对于HTMLElement，没有内置的“ insertAfter”，只有insertBefore。您需要在元素的nextSibling之前插入新元素。如果没有下一个同级，可以安全地假定该元素是最后一个子元素（除非它不在dom中），因此可以将其追加。

类似这样的事情应该可以解决：

function insertAfter(newElement,refElement){
   if(refElement.nextSibling)refNode.parentElement.insertBefore(newElement,refElement.nextSibling);
   else refNode.parentElement.appendChild(newElement);
 }
 insertAfter(document.getElementById('#box1'),frag);

Answer 2

您可以通过另一种方式来执行此操作，需要在选中复选框时更改元素的可见性，以便可以将EventLister添加到复选框并在触发事件时更改元素的样式。

const checkBox = document.getElementById('box1')

checkBox.addEventListener('change', function(){
  const elements = [...document.getElementsByClassName("visibility")]  
  if(this.checked){
    elements.forEach(element => {element.style.display="initial"})   
  }else{
    elements.forEach(element => {element.style.display="none"})  
  }
})

<form id="lang" class="poll" onsubmit="langCheck()">
    <h1 class="background ulin center">What programming languages do you know?</h1>
    <input class="lbox" id = "box1" type="checkbox" value="Assembly">Assembly<br>
    <p class="visibility" style="display:none"><input name="level" type="radio" id="radioButton1"> Expert</p>
    <p class="visibility" style="display:none"><input name="level" type="radio" id="radioButton2"> Middle</p>
    <p class="visibility" style="display:none"><input name="level" type="radio" id="radioButton3"> Beginner</p>
  </form>

document.body.appendChild（）将起作用，但是当我尝试附加到正文中的特定元素时

2 个答案: