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

我有一个列表，当用户使用搜索框时会被填充。这是整体结构：将hr标签附加到html中使用JavaScript的div元素？

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

我想要做的就是添加一个分隔符<hr/>孩子div元素之间，我做同样的事情时，我加入了旁边的图片使用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中没有附加函数，所以我被困在这个分隔符中。

来源

2016-05-12 Mohamed Elshawaf

'appendChild（）'是JavaScript中使用的append方法。 – zer00ne

或者你可以只在div上设置底部边框并使用填充/边距 – epascarello

-1

尝试使用jQuery库，更具体的append()功能：

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

我以前a作为例子的选择，但你可以随意去改变它。通过点击链接（或a），它会将<hr />附加到搜索结果ID中。

要详细了解append()函数（或通用库），请参阅文档here。

来源

2016-05-12 17:10:55

我在OP代码中看不到jQuery – epascarello

我喜欢@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 

     }

来源

2016-05-12 17:16:40 zer00ne

获取所有孩子的div，然后添加hr标签的HTML 。

1）获取所有孩子的div像

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

2）做一个循环和hr标签添加到每个格。

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

来源

2016-05-12 17:21:22

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

回答

相关问题