DOM-ссылка (например, var = $ ('селектор'))

Question

До того, как я прочитал документы по методам getElement ..., я верил, что некоторый код, такой как var src = $ ('Node'), делает ссылку на Node, но elements - это живая HTMLCollection найденных элементов.

Например, у меня есть следующий код:

  <div class='container'>
    <div class='origin' Node></div>
    </div>

var src=$('.origin');
console.log(src);
document.getElementsByClassName('container')[0].appendChild(document.getElementsByClassName('origin')[0].cloneNode(true));
document.getElementsByClassName('container')[0].appendChild(document.getElementsByClassName('origin')[0].cloneNode(true));
document.getElementsByClassName('container')[0].appendChild(document.getElementsByClassName('origin')[0].cloneNode(true));
console.log(src);
var src=$('.origin');
console.log(src);

Когда я создаю ссылку, размер связанной переменной равен единице. Но когда я клонирую некоторые элементы и добавляю, переменная все еще одного размера элемента. И только при получении ссылки размер коллекции будет равен 4 (как на реальной модели DOM). Так есть ли какие-либо методы для создания реальной связи, которая будет реагировать на фактическое состояние узлов DOM?

Запустите код здесь: https://jsfiddle.net/pws328xk/9/