无法在父div之外定义div

Question

我一直在研究的项目有一个HTML文件，如下所示：

<div id="spn-service-provider-list">
   <div class="spnsearch">
        <i class="spnicon spn-icon-search"></i> 
                <input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
   </div>
</div>

我想独立于父div移动 spnsearch ，因此，将其写在父div之外，如下：

<div class="spnsearch">
    <i class="spnicon spn-icon-search"></i> 
            <input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>

<div id="spn-service-provider-list">
   .............
   ............
</div>

当我在浏览器中检查页面时，不会发生任何更改。也就是说， spn-service-provider-list 仍然包含搜索框。有人可以向我解释为什么会这样吗？我是UI开发的初学者，所以如果问题是基本的，请耐心等待。谢谢！