如何在JavaScript中显示同一页面上的文本内容？

我正在制作一个电影分级应用程序，所以当你点击“添加”按钮时，一个表单会弹出。用户填写表单后，我希望页面显示表单的文本值，例如，如果有人在第一个字段中写入了Lion King，则页面应在文档下方的某个位置显示电影标题：Lion King，但仍在同一页面上。我尝试过使用document.write方法，该方法工作正常，但不适合使用，我希望在同一页上显示值，而不是在不同的页上。我也试过了。innerHTML，它仍然不起作用，但也许我只是做了一些错误。我的JavaScript不是那么先进，所以请尝试帮助我

document.getElementById（“add”）.addEventListener（'click'），
函数（）{
document.querySelector（“.bg modal”）.style.display='flex'；
});
document.querySelector（“.close”）.addEventListener（'click'，
函数（）{
document.querySelector（“.bg modal”）.style.display='none'；
});
const movie=document.getElementById（“movie”）；
文件.getElementById（“费率”）；
document.getElementById（“链接”）；
文件.getElementById（“des”）；
document.getElementById（“s”）.onclick=function（）{
document.querySelector（“.bg modal”）.style.display='none'；
document.write（“+”电影标题“+”：“+Movie.value+”）
}

正文{
背景色：黑色；
}
#加{
宽度：100px；
高度：100px；
背景：url（“https://i.ibb.co/HCW4rRn/icons8-add-100.png");
边界：无；
位置：绝对位置；
顶部：250px；
底部：0；
左：610px；
右：0；
光标：指针；
}
p{
颜色：白色；
字体大小：粗体；
位置：绝对位置；
顶部：360px；
左：455px；
}
.bg模式{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
显示：无；
}
.模态内容{
宽度：500px；
高度：300px；
背景：线性梯度（42度，#403B4A，#E7E9BB）；
边界半径：5px；
位置：相对位置；
}
.结束{
位置：绝对位置；
排名：0；
右：14px；
字体大小：32px；
变换：旋转（45度）；
光标：指针；
}
h1{
字体系列：“Hanalei”，草书；
}
h4{
字体系列：“Kanit”，无衬线；
位置：绝对位置；
左：85像素；
}
#des{
宽度：150px；
高度：50px；
位置：绝对位置；
左：150px；
顶部：190px；
边框颜色：黑色；
}
#电影{
位置：绝对位置；
左：135px；
边框颜色：黑色；
}
#比率{
位置：绝对位置；
左：315px；
}
#链接{
位置：绝对位置；
左：140像素；
顶部：140px；
边框颜色：黑色；
}
#{
边框颜色：白色；
文本权重：粗体；
位置：绝对位置；
左：195px；
顶部：265px；
}
#结果{
颜色：白色；
}

电影分级应用程序
欢迎使用电影分级应用程序，您可以在此处添加

所有您最喜欢的电影和电视节目，并将它们送给您

收视率，如果你不知道看什么，你可以

总是回到这里来。单击“添加”按钮开始。：）

+
请填写这张表格
1.
2.
3.
4.
5.
请放一个电影封面的链接






使用
文档。编写
您正在替换页面的整个DOM。这就是为什么它现在是一个“新”页面。您需要的是一个更窄的选择器


document.getElementById（“add”）.addEventListener（'click'），
函数（）{
document.querySelector（“.bg modal”）.style.display='flex'；
});
document.querySelector（“.close”）.addEventListener（'click'，
函数（）{
document.querySelector（“.bg modal”）.style.display='none'；
});
const movie=document.getElementById（“movie”）；
//这里发生了什么事？？？？您正在选择一组元素，而没有对其进行任何操作
文件.getElementById（“费率”）；
document.getElementById（“链接”）；
文件.getElementById（“des”）；
document.getElementById（“s”）.onclick=function（）{
document.querySelector（“.bg modal”）.style.display='none'；
var newEl=document.createElement（“p”）；
newEl.innerHTML=“电影标题”+：“+Movie.value；
//现在，将您创建的新标记附加到selectedMovies div子项
document.getElementById（'selectedMovies'）.appendChild（newEl）；
}
正文{
背景色：黑色；
}
#加{
宽度：100px；
高度：100px；
背景：url（“https://i.ibb.co/HCW4rRn/icons8-add-100.png");
边界：无；
位置：绝对位置；
顶部：250px；
底部：0；
左：610px；
右：0；
光标：指针；
}
p{
颜色：白色；
字体大小：粗体；
位置：绝对位置；
顶部：360px；
左：455px；
}
.bg模式{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
显示：无；
}
.模态内容{
宽度：500px；
高度：300px；
背景：线性梯度（42度，#403B4A，#E7E9BB）；
边界半径：5px；
位置：相对位置；
}
.结束{
位置：绝对位置；
排名：0；
右：14px；
字体大小：32px；
变换：旋转（45度）；
光标：指针；
}
h1{
字体系列：“Hanalei”，草书；
}
h4{
字体系列：“Kanit”，无衬线；
位置：绝对位置；
左：85像素；
}
#des{
宽度：150px；
高度：50px；
位置：绝对位置；
左：150px；
顶部：190px；
边框颜色：黑色；
}
#电影{
位置：绝对位置；
左：135px；
边框颜色：黑色；
}
#比率{
位置：绝对位置；
左：315px；
}
#链接{
位置：绝对位置；
左：140像素；
顶部：140px；
边框颜色：黑色；
}
#{
边框颜色：白色；
文本权重：粗体；
位置：绝对位置；
左：195px；
顶部：265px；
}
#结果{
颜色：白色；
}
#精选影片{
位置：相对位置；
顶部：150px；
}

电影分级应用程序
欢迎使用电影分级应用程序，您可以在此处添加

所有您最喜欢的电影和电视节目，并将它们送给您

收视率，如果你不知道看什么，你可以

总是回到这里来。单击“添加”按钮开始。：）

+
请填写这张表格
1.
2.
3.
4.
5.
请放一个电影封面的链接






查看和查看