即使元素确实有子节点，方法中的 hasChildNodes() 也会返回 false

Question

I'm making a quiz creation app that allows me to choose a text area, a text box, a select box, or a set of radio boxes for a specific question. I can add and remove all those input types fine except for the radio boxes. I'm trying to delete individual radio boxes, and to do that I want to use a dynamically generated, numbered DIV element that the radio button, label, and delete button can all append to. Here is the relevant HTML. Each generated DIV with this content will be appended to the DIV with the formDiv ID.

   <div style='margin-top: 10px;' class='jumbotron'>
       <form action='#' method='#'>
           <div>
    <input type=’button’ value=’Add component’ id=’addContent’>
    <div id=’chooseContent’ style=’display:none’>
        <ul>
            <li class=’list-group-item’>
                <div id=”textareaOpt”>Text area</div>
            </li>
            <li class=’list-group-item’>
                <div id=”textOpt”>Text box</div>
            </li>
            <li class=’list-group-item’>
                <div id=”selectOpt”>Select</div>
            </li>
            <li class=’list-group-item’>
                <div id=”radioOpt”>Radio</div>
            </li>
        </ul>
        <input type=’button’ id=’cancelContent’ value=’X’>
    </div>
               <div id= 'formDiv'></div>
           </div>
       </form>
   </div>

The formDiv element is meant to be the parent element to any input type. I'm dynamically adding radio buttons to a page that are appended to the generated DIV component, and use addDeleteBtn() to create a button to remove the component and I'm trying to append it to the component instead of formDiv. However, addDeleteBtn() doesn't interpret formDiv as having any child elements for it to append to, even though createComponent() does recognize formDiv's children.

function createComponent(){
if(targetType == 'radio'){
  form_content_num++; 
  var component = document.createElement('div');
  component.id = form_content_num; //to dynamically number these divs
  console.log(component);

  var radioLabel = document.createElement('label');
  radioLabel.style.display = 'inline';

  var radioBtn = document.createElement('input');
  radioBtn.style.display = 'inline';
  radioBtn.type = targetType;

  component.appendChild(radioLabel);
  component.appendChild(radioBtn);
  console.log("formDiv.childNodes[0] " + formDiv.childNodes[0]); //this returns true
}

addDeleteBtn();
formDiv.appendChild(component);
console.log("formDiv.childNodes[0] " + formDiv.childNodes[0]); //also returns true
}
function addDeleteBtn(){
  var formDiv = document.getElementById('formDiv');
  console.log("formDiv " + formDiv);
  console.log("hasChildNodes " + formDiv.hasChildNodes()); //returns false
  //code not relevant to this problem was deleted to save space
}

Answer 1

addDeleteBtn();
formDiv.appendChild(component);

are in the wrong order. Change it to

formDiv.appendChild(component);
addDeleteBtn();

Basically when moving the button to the component from formDiv , the call to addDeleteBtn wasn't moved to after component was added to the DOM.