Question

大家好，这里我试图通过onclick显示特定div的源代码

javascript函数。但结果是，当我点击div时，我看到了

整个源代码虽然我试图只使div的特定源代码得到

显示。有人请突出我在这里做错了什么..！以及如何做到

它以预期的方式运作。

  <html>
    <head>
        <title></title>
    <script type="text/javascript">
    function viewsource(){
       var oldHTML = document.getElementById('para').innerHTML;
       var newHTML = "" + oldHTML + "";
       var newHTML = newHTML.replace(/</g,"&lt;");
       var newHTML = newHTML.replace(/>/g,"&gt;");
       var newHTML = newHTML.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        document.getElementById('para').innerHTML = newHTML;
    }
    </script>

    </head>

    <body>
    <p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p> 
    <input type='button' onclick='viewsource()' value='View Source'/>
    </body>
    </html>

附加说明：

在上面的代码中，当单击按钮时，id为para的段落标记将显示...但它也显示了它的css。我想只显示没有css样式属性的html标签。

我不希望内容使用innerHTML，但我希望整个div包括div id。（例如。）<div id='softros'><img src='/images/bgrade.jpg' /></div>

Answer 1

您是否考虑过在您的javascript处理程序中使用：

document.getElementById(YOUR_DIV_ID_GOES_HERE).innerHTML

Answer 2

您可以使用.innerHTML或.outerHTML获取div的HTML，但在显示之前需要对其进行编码。否则，html会被浏览器渲染。在PHP中你可以使用htmlencode javascript没有这个功能但是你可以使用这个htmlencode。

如何通过onClick（）javascript查看特定html标记的源代码而不显示其CSS？

2 个答案: