Как сделать создание текста с помощью JavaScript который изначально не виден?

Немного не понимаю как можно такое сделать, в общем есть определенный текст, его нужно вывести на страницу, но что бы он не был виден, вывести на страницу можно как то с помощью клика на кнопку, с этим разобрался, а вот как можно его скрыть, то есть что бы он был, но его не было видно, надеюсь нормально объяснил, заранее благодарю за помощь в решении моего вопроса!)

Да, через кнопку самый удобный вариант, а скрывал бы я его с помощью класса, то есть просто выводить его на страницу с уже имеющимся классом, который в свою очередь скрывал бы текстовый блок, вот реализация:

<div id="some_text">Видимый текст
<button
id="add">Добавить текст
<button
id="show">Показать/Скрыть текст

let i = 1;
$("#add").on('click',function(){
$(
"#some_text").after('

Невидимый текст ' i '
');
i ;
} )
$(
"#show").on('click',function() {
$(
".hidden_text").toggle();
} )

div {
margin-bottom: 10px;
}

.
hidden_text {
display: none;
}

Первый блок с кодом это просто разметка, где есть один блок и две кнопки, блок указывает куда мы будем добавлять элементы ( то есть сразу после этого блока ) ну и две кнопки, при клике на которые срабатывают функции, при клике на первую кнопку после видимого текста добавляется блок с текстом но у него сразу присутствует класс спрятанный текст у которого display: none, манипулируя с displayем мы делаем его то видимым то нет)