当有图像时，如何在javascript中正确使用innerHTML值？

Question

在我的jsp页面中，我想列出目录中的所有文件名和子文件夹名称以及相应的图像。 当是文件时，显示文件图像； 如果它是子文件夹，请显示文件夹图像。 列出文件名和子文件夹名后，单击文件时，jsp页面将显示文件的内容； 当双击子文件夹名称时，jsp页面将显示当前目录中的文件名和子文件夹名称。 屏幕截图如下：

显示文件名和子文件夹名称的代码部分如下：

<% 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事件为例，部分代码如下：

<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-example / images / book.png”> postgreSQL.rptdesign”。 实际上，我只想获取“ postgreSQL.rptdesign”。 单击文件名时，如何仅读取没有图像标签的文件名？ 你能给我一些建议吗？ 提前非常感谢。

Answer 1

您正在寻找.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> 

Answer 2

它与“ textContent”属性一起使用。 我替换了代码：

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

与：

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

并且它正常工作。

谢谢大家 ！