Q:

Query, sort and replace DOM elements

I am trying to sort the order of a nodeList that I queried for and replace them onto the DOM but using the solution below I am getting undefined in the HTML. Does anybody know whats going on?
const container = elem[0].childNodes[1];
let graphs = container.querySelectorAll('visualization-container[data-graph]');

const sorted = [].slice.call(graphs).sort((a, b) => {
    const first = a.getAttribute('data-graph');
    const second = b.getAttribute('data-graph');

    return scope.visualizationsOrder[first] > scope.visualizationsOrder[second] ? 1 : -1;
});

console.log(sorted); // Sorted is correct
container.replaceWith(sorted); // error here

Here is a jsfiddle that illustrates the issue https://jsfiddle.net/ejdq1xyz/

A:

The "problem" here is, that sorted is an array of Nodes.
I'm not quite sure why you want to replace the container with its sorted children...
If the container should not be removed than you have to use .appendChild(), .append() or .insertAdjacentElement() instead of .replaceWith().
And because sorted is an array you have to add the nodes one by one with a for loop or .forEach():
sorted.forEach(n => container.appendChild(n));
sorted.forEach(n => container.append(n));
sorted.forEach(n => container.insertAdjacentElement("beforeEnd", n));

In case of .append() you could also use .apply() (ES5 version) or the ES6 spread operator/syntax ... as it will also accept a set of Nodes/DOMStrings:
container.append.apply(container, sorted);
container.append(...sorted);

const order = {
  identifierOne: 4,
  identifierTwo: 3,
  identifierThree: 1,
  identifierFour: 2
};

const container = document.querySelector('.container');
const graphs = container.querySelectorAll('.graph[data-graph]');

const sorted = [].slice.call(graphs).sort((a, b) => {
    const first = a.getAttribute('data-graph');
    const second = b.getAttribute('data-graph');

    return order[first] > order[second] ? 1 : -1;
});

sorted.forEach(n => container.appendChild(n));
<div class='container'>
<div class='graph' data-graph='identifierOne'>4</div>
<div class='graph' data-graph='identifierTwo'>3</div>
<div class='graph' data-graph='identifierThree'>1</div>
<div class='graph' data-graph='identifierFour'>2</div>
</div>

If the container should be replaced than you can use .replaceWith() with .apply()  or the spread operator/syntax ...
container.replaceWith.apply(container, sorted);
container.replaceWith(...sorted);

const order = {
  identifierOne: 4,
  identifierTwo: 3,
  identifierThree: 1,
  identifierFour: 2
};

const container = document.querySelector('.container');
const graphs = container.querySelectorAll('.graph[data-graph]');

const sorted = [].slice.call(graphs).sort((a, b) => {
    const first = a.getAttribute('data-graph');
    const second = b.getAttribute('data-graph');

    return order[first] > order[second] ? 1 : -1;
});

container.replaceWith.apply(container, sorted);
//container.replaceWith(...sorted);
<div class='container'>
<div class='graph' data-graph='identifierOne'>4</div>
<div class='graph' data-graph='identifierTwo'>3</div>
<div class='graph' data-graph='identifierThree'>1</div>
<div class='graph' data-graph='identifierFour'>2</div>
</div>

