Как использовать результат работы функции в другой функции

Только начал путь по изучению js. Не полоучается отработать правило: одна функция - одно действие.

Есть массив объектов из него достаем значения, присваеваем элементам шаблона и вставляем в поток. Первый вариант - элементы появляются на странице. Во втором случае - нет.

Не понимаю как правильно разделить рабочую функцию на две:

1. Создать карточку.
2. Добавить в коллекцию.

Работает:

const arr = [
  {
      name: 'Имя',
      link: 'ссылка'
  },
  {
      name: 'Имя',
      link: 'ссылка'
  },
  
];

function render() {
  arr.forEach(createCard);
}

function addCardDocElem(elem){
  cardList.append(elem);
}

function createCard(item) {
  const element = elementTemplate.cloneNode(true);
  element.querySelector('.element__image').src=item.link;
  element.querySelector('.element__title').textContent=item.name;
  addCardDocElem(element); 
}

render();

Не рабоатет:

function render() {
  arr.forEach(createCard);
}

function addCardDocElem(elem){
  return cardList.append(elem);
}

function createCard(item) {
  const element = elementTemplate.cloneNode(true);
  element.querySelector('.element__photo').src=item.link;
  element.querySelector('.element__title').textContent=item.name;
  return element
}

const why = createCard(item);
addCardDocElem(why);

render();
}