Добавление атрибута тегу

[_marisha]

Доброго времени суток!
Необходимо тегу с id out добавить в атрибут data-atr полученное значение.
Делаю так:

var idLi = document.getElementsByClassName('flex-active-slide')[0];
var atr = idLi.getAttribute('data-value'); // тип в итоге string
$(document).ready(function(){
$('#out').attr('data-atr',atr);
}

В таком случае атрибут data-atr не добавляется элементу с id out.
Если atr присвоить конкретно значение, то атрибут со значением добавляется. Пример:

var idLi = document.getElementsByClassName('flex-active-slide')[0];
var atr = 'text'; // тип в итоге string
$(document).ready(function(){
$('#out').attr('data-atr',atr);
}

Подскажите, пожалуйста, что делаю не так?
При var atr = idLi.getAttribute('data-value');
В alert atr выводится (т.е. значение есть), тип string

[рони]

_marisha,
строку 3 перенести в строку ноль.

[_marisha]

рони, спасибо что откликнулись.
Точно
Итог:

$(document).ready(function(){
var idLi = document.getElementsByClassName('flex-active-slide')[0];
var atr = idLi.getAttribute('data-value');					
$('#out').attr('data-atr',atr);
});

[рони]

Итог:

document.addEventListener("DOMContentLoaded" , function() {
var idLi = document.querySelector(".flex-active-slide");
var atr = idLi.dataset.value;
document.getElementById("out").dataset.atr = atr;
  });