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

cloneNode（true）不复制子元素

2 个答案: