使用JavaScript将hr标签附加到html中的div元素？

Question

我有一个在用户使用搜索框时填充的列表。 这是整体结构：

<div id="searchResult">
<div>
<a href="#">result1</a>
</div>
<div>
<a href="#">result2</a>
</div>
<div>
<a href="#">result3</a>
</div>
</div>

我想做的是在子div元素之间添加分隔符<hr/> ，当我使用javascript在每个结果项旁边添加图片时，我做了同样的事情：

 <script>
        function appendArrows() {
            var myDiv = document.getElementById('searchResult');
            var list = myDiv.getElementsByTagName('div');

            for (var i = 0; i <= list.length; i++) {

                var _img = document.createElement('img');
                _img.src = "Images/navigation Icon.png";
                _img.id = "arr";
                list[i].appendChild(_img);
</script>

但是由于JavaScript中没有仅添加函数，所以我陷入了这个分隔符中。

Answer 1

我更喜欢@epascarello建议，但是如果您想使用JavaScript，则只需将以下行添加到现有代码中：

    function appendArrows() {
        var myDiv = document.getElementById('searchResult');
        var list = myDiv.getElementsByTagName('div');

        for (var i = 0; i <= list.length; i++) {

            var _img = document.createElement('img');
            _img.src = "Images/navigation Icon.png";
            _img.id = "arr";
            list[i].appendChild(_img);
            var hzRule = document.createElement('hr');// make a hr
            list[i].appendChild(hzRule);// append the hr

         }

Answer 2

获取所有子div，然后将hr标签添加到其html中。

1）让所有的孩子div像

var childDivs = document.querySelectorAll('#searchResult div');

2）循环执行，然后将hr标签添加到每个div。

for(var i = 0; i < childDivs.length; i++){ childDivs[i].outerHTML += "<hr/>; }

Answer 3

尝试使用JQuery库，更具体地说，使用它的append()函数：

$("a").click(function(){
   $( "#searchResult" ).append( "<hr />" );
}); 

在示例中，我使用a作为选择器，但是您可以随意对其进行更改。 通过单击链接（或a ），会将<hr />附加到搜索结果ID中。

要了解有关append()函数（或一般的库append()更多信息，请参见此处的文档。