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()函数（或一般的库），请查看文档here。

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

3 个答案: