[hasChildNodes（）在方法中返回false，即使该元素确实具有子节点也是如此

Question

我正在制作一个测验创建应用程序，它允许我为特定问题选择文本区域，文本框，选择框或一组单选框。除了单选框，我可以添加和删除所有这些输入类型。我正在尝试删除单个单选框，为此，我想使用动态生成的编号DIV元素，单选按钮，标签和删除按钮都可以附加到该元素。这是相关的HTML。每个生成的具有此内容的DIV将被附加到具有formDiv ID的DIV中。

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

formDiv元素是任何输入类型的父元素。我正在向添加到生成的DIV组件的页面动态添加单选按钮，并使用addDeleteBtn（）创建一个按钮以删除该组件，而我尝试将其添加到组件而不是formDiv。但是，即使createComponent（）可以识别formDiv的子元素，addDeleteBtn（）也不会将formDiv解释为具有要附加的任何子元素。

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

顺序错误。更改为

formDiv.appendChild(component);
addDeleteBtn();

基本上是将按钮从component移到formDiv时，将addDeleteBtn添加到DOM后，对component的调用并未移到。