如何正確使用javascript中的innerHTML值？

在我的jsp頁面中，我想列出具有相應圖像的目錄中的所有文件名和子文件夾名稱。當它是文件時，顯示文件圖像;當它是子文件夾時，顯示文件夾圖像。列出文件名和子文件夾名稱後，單擊文件時，jsp頁面會顯示文件的內容;當雙擊子文件夾名稱時，jsp頁面將顯示當前目錄中的文件名和子文件夾名稱。該屏幕截圖是如下：如何正確使用javascript中的innerHTML值？

的代碼的部分，以顯示中的文件名和子目錄名如下：

<% File directory = new File(var_path); 
     if (directory.isDirectory()) { 
      File[] list = directory.listFiles(); 
      for (int i = 0; i < list.length; i++) { 
       if(list[i].isDirectory()) { 
        out.print("<TR> <TD ondblclick=list_files("+i+") id="+i+"><img src="+ "/brt-example/images/folder.png />"+list[i].getName()+"</TD></TR>"); 
       }else{ 
        out.print("<TR><TD onclick=show_file_content("+i+") id="+i+"><img src="+ "/brt-example/images/book.png />"+list[i].getName()+"</TD></TR>"); 
       } 
      } 
     } 
    %>

然後，我根據的onclick或雙調用相應的JavaScript函數點擊事件。採取onclick事件作爲exampe，代碼的部分如下：

<script type="text/javascript"> 
function show_file_content(id) 
     { 

        var id = id; 
        document.getElementById(id).onclick = function() 
        { 
         var file_name = document.getElementById (id).innerHTML; 
         alert(file_name); 
        } 
     } 
</script>

但是警告消息框顯示我「< IMG SRC =」/ BRT-示例/圖像/ book.png「> postgreSQL.rptdesign 「。其實，我只想得到「postgreSQL.rptdesign」。當我點擊文件名時，如何只讀取沒有圖像標籤的文件名？你能給我一些建議嗎？非常感謝。

來源

2016-01-18 Anwar Ahmad

爲什麼你不使用jQuery？ – omerowitz

如果你想堅持DOM /純JavaScript方法，那麼你應該切換到[document.querySelector（）]（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector ）。 – omerowitz

它與「的textContent」屬性。我取代了代碼：

var file_name = document.getElementById (id).innerHTML;

有：

var file_name = document.getElementById (id).textContent;

而且它工作正常。

謝謝大家！

來源

2016-01-18 13:31:29

你正在尋找的東西.innerText。

替換var file_name = document.getElementById (id).innerHTML;

要var file_name = document.getElementById (id).innerText;

例

<div> 
 
    <img src="url_to_img" /> And text too 
 
</div> 
 
<hr /> 
 
<button onclick="alert(document.querySelector('div').innerHTML);">alert div.innerHTML</button> 
 
<button onclick="alert(document.querySelector('div').innerText);">alert div.innerText</button>

jQuery的版本

您可以使用.text()功能。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="url_to_img" /> And text too 
 
</div> 
 
<hr /> 
 
<button onclick="alert($('div').html());">alert $(div).html()</button> 
 
<button onclick="alert($('div').text());">alert $(div).text()</button>

來源

2016-01-18 11:27:08

非常感謝您的指示。但是，它應該是：var file_name = document.getElementById（id）.textContent;而不是innerText。 –

'應該是'？誰說的 ;）？ –

如何正確使用javascript中的innerHTML值？

回答

相關問題