將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元素？

回答

相關問題