CODEWITHSUNDEEP
javascriptjquery
Nick Chapman
Nick Chapman

Reputation: 4624

cloneNode(true) is not copying child elements

I have the following:

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() returns the following:

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

Which should theoretically append a <select> element to each div with the class projectListDiv. It does append a <select> element but the element has no <options despite the fact that projectList clearly has options. I have logged everything to console to check and for some reason when I cloneNode(true) I lose all of projectList's children. Thoughts?

Upvotes: 1

Views: 1615

Answers (2)

progysm
progysm

Reputation: 1072

Async mode, with callback:

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

Upvotes: 0

progysm
progysm

Reputation: 1072

I've made an example in http://jsfiddle.net/NSYRH/ with a custom getProjects() that return a select with options:

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

I don't see any problem with this code.

Upvotes: 1

Related Questions