Question

我正在尝试学习如何在javascript中创建和加载一个简单的动态面板

这是我的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" language="javascript">
        function createQuestionPanel() {
            var div = '<div>top div</div>';
            return div;
        }

    </script>
</head>
<body onload=createQuestionPanel()>
<div id="d1" onclick=createQuestionPanel()></div>
</body>
</html>

On Debugging（在Firebug上）面板加载正常。我已经尝试了所有可能的组合来调用该方法。但它不是正在加载..如果是静态的Div Panel加载正常

我见过使用样式显示/隐藏现有Panel的建议：可见功能。并使用CSS ..我不想这样做..我只是需要建议，这样可以吗？

Answer 1

<script type="text/javascript" language="javascript">
    function createQuestionPanel() {
       var div = document.createElement("div");
       var textNode = document.createTextNode("top div");
       div.appendChild(newContent);
       document.body.appendChild(div);
    }
</script>
 <body onload=createQuestionPanel()>
  <div id="d1" onclick=createQuestionPanel()></div>
 </body>
</html>

Answer 2

你已经定义了一个字符串。您永远不会将该字符串解释为DOM节点，或将结果添加到DOM。

尝试

$(document).append('<div>top div</div>');

Answer 3

将您的HTML更改为：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script type="text/javascript" language="javascript">
            function createQuestionPanel() {
                document.body.innerHTML += '<div>top div</div>';            
            }

        </script>
    </head>
    <body onload="createQuestionPanel()">

    </body>
</html>

简单的动态div面板不在JavaScript中加载

3 个答案: