insertAdjacent HTML, css и document.write вопрос

Question

Я проверил несколько документов. Напишите ответы и вопросы. Видимо, это не очень хороший стиль для использования document.write. Это не имеет значения для меня, так как я работаю над калькулятором, и мне нравится вывод на другой странице.

Код открывает новое окно, которое я не могу стилизовать с css, но хотел бы , Я хотел бы создать коробку вокруг этого. Кто-нибудь знает об альтернативе document.write. Я попытался использовать element.insertAdjacent HTML (), как показано ниже, но он просто очищает форму.

Вот код

function process(){
 const w = document.getElementById('w').value
 const dR=  document.getElementById('dR').value
 const fB= document.getElementById('fB').value
 const cD= document.getElementById('cD').value

 const ad = w * dR

//  2 - now divide by the number of hours in a day (24) 
const PHR = ad / 24 

//equation 3 Next divide by the concentration 
const dDFR = PHR / (cD / 100)


const bagsLifeTime = fB/(4*w)

/*take the number of hours this bag will last and multiply 
by the mL/hour of ...:*/
const dATB = bagsLifeTime * dDFR 


document.write(`Add ${dATB .toFixed ()} 
ml of the liquid to the ${fB} bag`)
document.close();

}

 Insert.AdjacentHTML

 const dATB = bagsLifeTime * dDFR 
 dATB  = getElementById('dATB ')
 dATB .insertAdjacentHTML('afterbegin', ${dATB });