In my project, I have an HTML slider that selects a year and has an EventListener such that when the slider is changed, an SVG corresponding to the selected year is added to a container div.

Here's the function called by the EventListener:

function loadMap(e) {
    var year = e.target.value;
    container.html(""); //clear previous svg
    container.node().append(svgs[year - 1956].documentElement);
}

svgs is an array of documents loaded from d3.xml(), and container holds the div as returned by a d3.select() for the div's id.

The function loads the content without problem the first time a year is selected. But if I return to that year a second time, svgs[year - 1956].documentElement is null. I've tried appending a documentElement.cloneNode() instead, and while that fixes the null issue, the SVG graphics aren't showing up. Any suggestions?