как вызвать функцию внутри другой функции?
 

Хочу понять как вызывать функцию из разных файлов в другую функцию. То-есть чтобы 2 функция с элементом p был внутри div с классом ttt

файл t.js

import { f } from "./f.js"

function t(root) {
    const ttt = document.createElement("div")
    ttt.classList.add("ttt")

    t.append(f(root))

    root.append(ttt)

}

t(document.querySelector("body"))

файл f.js

function f(root) {

    const fff = document.createElement("p")
    fff.classList.add("fff")

    root.append(fff)
}

export { f }

Что я не так тут сделал? + я знаю можно еще с помощью return возвращать функцию, если можно примерчик с return или append

t.append(f(root))

t - это функция, а не элемент
Наверно вы хотели написать ttt.append(f(root))
Но f должна возвращать элемент, который она создает
Поэтому так надо

import { f } from "./f.js"
 
function t(root) {
    const ttt = document.createElement("div")
    ttt.classList.add("ttt")
 
    ttt.append(f())
 
    root.append(ttt)
 
}
 
t(document.querySelector("body"))

и

function f() {
    const fff = document.createElement("p")
    fff.classList.add("fff")
 
    return fff
}
 
export { f }

voraa,
А если там не один элемент а штук 6 или больше? Тогда нужно возвращать последний элемент(родительский)?

Где там?
А возвращать надо всегда то, что потом будет где то использоваться, и чего нет во внешнем коде.

voraa,
Я имею виду если я не один элемент хочу из функции вызвать, а целую структуру блоков вот так:

<div class="box">
    <div class="item">
      <img src="" alt="" class="image">
      <img src="" alt="" class="image">
      <img src="" alt="" class="image">
    </div>
  </div>

P.S. я просто пытаюсь вернуть innerHTML, а получил не то что хотел.