cloneNode(true)不复制子元素

Question

我有以下几点：

var divs = document.getElementsByClassName('projectListDiv');
var projectList = getProjects();
/* getProjects() generates a <select> element with multiple <option>s */
for(var i = 0; i < divs.length; i++){
    divs[i].innerHTML = "";
    var listCopy = projectList.cloneNode(true);
    divs[i].appendChild(listCopy);
}

getProjects()返回以下内容：

<select>
    <option value="test">test</option>
    <option value="Project Test">Stalker Test</option>
</select>

理论上，它应该用类<select>将一个projectListDiv元素附加到每个div。它确实附加了一个<select>元素，但是元素没有<options，尽管projectList显然有选项。我已经记录了所有的事情来安慰我，因为某种原因，当我cloneNode(true)的时候，我失去了projectList所有的孩子。

Answer 1

我在http://jsfiddle.net/NSYRH/中做了一个示例，它使用自定义的getProjects()返回带有选项的select：

function getProjects() {
    var s = document.createElement('select');
    s.appendChild(new Option('a','avalue'));
    s.appendChild(new Option('b','bvalue'));
    s.appendChild(new Option('c','cvalue')); 
    return s;
}

我看不出这个代码有什么问题。

Answer 2

异步模式，带有回调：

getProjects(function(projectList) {
   var divs = document.getElementsByClassName('projectListDiv');
   /* getProjects() generates a <select> element with multiple <option>s */
   for(var i = 0; i < divs.length; i++){
       divs[i].innerHTML = "";
       var listCopy = projectList.cloneNode(true);
       divs[i].appendChild(listCopy);
   }
})

function getProjects(successCallback) {
  var s = document.createElement('select');
  var xhr = new XMLHttpRequest(); 
  xhr.open('GET', '/something');
  xhr.onload = function() {
     /** use xhr.responseText here to add option to node s */
     /* then call the successCalback) */
     successCallback(s);
  }
  xhr.send();
}