Question

这应该是一件非常容易的事，但它不会返回任何东西。函数love（）应该启动，获得一个简单的数字提示，然后吐出一些使用该起始编号的项目列表。警报框正确显示我的期望，但我希望它显示在屏幕上。（这只是我所追求的一小部分，但它是它的核心）。 IE，FF或Chrome中没有显示任何文字...

<script type="text/javascript">
        function love()
        {
            var ncxElement="";
            var idNumber = prompt("Enter beginning number","");
            var myText=document.getElementById("here");
            for (var i=1;i<5;i++)
            {
                ncxElement+=("<navPoint class=\"other\" id=\"page_"+idNumber+"\">\n");
                idNumber++;
            }
                alert(ncxElement);
                myText.innerHTML=ncxElement;
        }
    </script>
    </head>
    <body onload="love()">
    <p id="here">Begin!</p>
    </body>

Answer 1

如果要在页面上显示HTML（不进行解析），请使用.textContent代替.innerHTML并将其包装在<pre>中（以保留换行符）。

演示：

变化：

myText.innerHTML=ncxElement;

要：

myText.textContent=ncxElement;

变化：

<p id="here">Begin!</p>

要：

<pre id="here">Begin!</pre>

Answer 2

navPoints不是有效的html元素，因此浏览器不知道如何处理它们。它们被添加到DOM中，除非您添加样式，否则不会显示它们。

如果用段落标签替换它们，它可以正常工作。请参阅示例here。

<script type="text/javascript">
    function love()
    {
        var ncxElement="";
        var idNumber = prompt("Enter beginning number","");
        var myText=document.getElementById("here");
        for (var i=1;i<5;i++)
        {
ncxElement+=("<p class=\"other\" id=\"page_"+idNumber+"\">"+idNumber+ "</p>");
            idNumber++;
        }
            alert(ncxElement);
            myText.innerHTML=ncxElement;
    }
</script>
</head>
<body onload="love()">
<p id="here">Begin!</p>
</body>

Answer 3

你的函数只是将元素包装在另一个元素中。 dipslay中没有这些元素内部或外部的文本。在关闭标记之前尝试插入一些随机文本以查看结果。顺便说一句，元素已成功放置在p标签中。

document.getElementById innerHTML没有显示

3 个答案: