Html 如何在父div中显示具有相同输入框的新div

我想在窗口的左上方显示一个对齐的搜索文本框和弹出框

导航栏中已经有一个

搜索输入框

。当用户单击该

输入框时，我想弹出另一个宽度完全相同的div，并使用相同的输入框作为新div的一部分


window.addEventListener（'DOMContentLoaded'，（事件）=>{
var searchboxelement=document.getElementById（“search_header_card”）；
var headerclose=document.getElementById（“header_close”）；
var inputheaderbox=document.getElementById（“标题输入框”）；
var headerClose=document.getElementById（“header_close”）；
inputheaderbox.addEventListener（“单击”，显示搜索框，false）；
headerClose.addEventListener（“单击”，搜索关闭，false）；
函数showSearchBox（）{
searchboxelement.classList.remove（“d-none”）；
};
函数searchclose（）{
searchboxelement.classList.add（“d-none”）；
};
});
.body color{背景色：红色}
* {
保证金：0；
填充：0；
}
导航条{
对齐内容：居中对齐；
位置：粘性；
背景色：白色；
z指数：100；
排名：0；
盒子阴影：0px 5px 8px-9px rgba（0,0,0,75）；
填充：0px 20px；
/*移除顶部填充物*/
}
.fas.fa搜索{
颜色：65676b；
}
.标题\uuuu左>img{
高度：40px；
}
.页眉左{
显示器：flex；
对齐项目：居中；
}
.header\u输入{
显示器：flex；
对齐项目：居中；
背景色：#eff2f5；
填充：10px；
左边距：10px；
边界半径：999px；
}
.header\u输入>输入{
边界：无；
背景色：透明；
轮廓宽度：0；
左侧填充：10px；
}
.收割台中心{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
/*修改的css*/
.标题\中心\选项{
列表样式：无；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
列表样式：无；
左侧填充：10px；
页边距底部：0；
高度：60px；
}
.标题\中心\项目{
显示器：flex；
对齐项目：居中；
证明内容：中心；
光标：指针；
字体大小：400；
填充：0.2vw；
高度：60px；
右边距：8px；
框阴影：插入0 3px#f8f9fa，插入0-3px#f8f9fa；
}
.header\u center\u item.active，
.header\u center\u项目。活动：悬停{
颜色：#1877f2；
/*边框底部：1px实心#1877f2；
边框底宽：3倍*/
背景色：#f8f9fa；
边框右下半径：0px；
边框左下半径：0px；
}
.标题\中心\项目：悬停{
背景色：#e9ebef；
边框左上半径：10px；
边框右上角半径：10px；
边框右下半径：10px；
边框左下半径：10px；
}
.header_选项链接{
弯曲方向：立柱；
高度：52px；
显示器：flex；
文字装饰：无；
证明内容：中心；
颜色：灰色；
}
.header\u center\u item.active>.header\u选项链接{
颜色：#1877f2；
}
.header_选项链接：悬停{
颜色：灰色；
}
.header\u center\u item.active{
颜色：#1877f2；
边框底部：1px实心#1877f2；
边框底宽：3倍；
背景色：#f8f9fa；
边框右上角半径：1px；
边框左上半径：1px；
右：2px；
左：2px；
}
.搜索\标题\卡片\输入{
右边填充：20px；
左侧填充：20px；
框大小：边框框；
显示器：flex；
高度：60px；
对齐项目：居中；
}
.搜索标题卡{
排名：0；
左：0；
位置：固定；
宽度：100%；
z指数：4；
背景色：#ffffff；
框大小：边框框；
最大宽度：100vw；
高度：60px；
宽度：320px；
}
.搜索框{
宽度：100%；
边界：0；
显示：块；
边框右下半径：8px；
边框左下半径：8px；
位置：相对位置；
框大小：边框框；
垫底：8px；
左侧填充：8px；
显示器：flex；
背景色：#ffffff；
弯曲方向：立柱；
柔性生长：1；
}
.收割台关闭{
高度：40px；
宽度：40px；
边界半径：50%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#e4e6eb；
光标：指针；
}


我的同僚们都是精英。尼莫·莫迪·奎斯·莫迪·奎斯（Nemo modi quis nobis hic saepe suscipit dolorem sint atque cumque）。这是一张真实的脸。阿尼米，真的。诺斯特鲁姆，配给制。





为什么不在用户单击导航栏时隐藏输入框，并在用户单击新创建的div元素的关闭按钮时将其带回来

为此,

在showSearchBox函数中，您可以添加

 inputheaderbox.style.display = "none";

在closesearch函数中，添加

 inputheaderbox.style.display = "initial";

我认为这是最好的解决方案，因为它只需要js文件中的2行代码

隐藏不是这里的问题！躲起来不会给我想要的解决办法。