Javascript 基于另一元素位置的位置划分

我有一个提交按钮：

<input type="submit" name="submit_search" id="submit_search" value="Search"/>

我有一个显示放大镜的分区：

<div class="icon">
    <div class="search"></div>
</div>

我在寻找一个JavaScript函数，该函数将在页面加载后立即启动，并将放大镜放置在按钮的顶部

是否有一个JavaScript函数可以从元素的ID中找到元素在页面上的位置，这样我就可以使用它来绝对定位图标分区

---

我是否包含了足够的代码

您可以创建一个函数，在按钮中添加一点HTML，如下所示：

function addIconToButton(buttonId){
    var icon = document.createElement('div');
    var search = document.createElement('div');
    icon.className = 'icon';
    search.className = 'search';
    icon.appendChild(search);
    document.getElementById(buttonId).appendChild(icon);
}

像这样使用它：

window.onload=function(){
    addIconToButton('submit_search');
};

---

在这个问题中没有给出JavaScript代码的尝试。你不能只编辑按钮的CSS而不使用单独的div吗？有很多关于如何定制输入元素的指南：或者

？css位置：绝对？输入

和
div.icon
元素如何相对定位？代码是什么样子的？我应该把窗口放在哪里。这只是放在脚本标签中，还是我需要放在某个地方启动它？这对我的一些元素有效，但对提交元素似乎不起作用。有没有办法将它附加到submit元素？这并没有完全解决我想要的问题，因为它是我得到的最接近的。我将发布我使用的完整代码。