使用Jquery将文本附加到div中

时间:2010-01-03 13:48:32

标签: c# asp.net jquery

我在我的示例页面中尝试了以下代码并且它不起作用。我想要做的就是在单击按钮时将一些文本附加到页面上的div中。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/jscript">
        $(document).ready(function () {
            $('#Button1').click(function () {
                $('#testdiv').append("Hello World!!");
            });

        });

    </script>
    <input id="Button1" type="button" value="button" />
    <div id="testdiv"> 
    adiv
    </div>
</asp:Content>

请指导我如何在jquery中使用这个简单的东西...

由于

编辑:我按照你的建议更新了我的代码...仍然无效...请帮帮我...谢谢

4 个答案:

答案 0 :(得分:3)

尝试从

修复脚本声明
<script type="text/jscript">

<script type="text/javascript">

因为有些浏览器很挑剔。

答案 1 :(得分:1)

您正在为文档的ready事件内的按钮ready事件添加处理程序。由于在添加处理程序时按钮已准备就绪,因此没有任何操作。

您需要为按钮的click事件添加处理程序,如下所示:

$('#Button1').click(function () {
    $('#testdiv').append("Hello World!!");
});

答案 2 :(得分:1)

在我的测试中,我发现将直接文本添加到div中是行不通的。

例如:我将使用appendTo()但它应该是相同的结果。

我的用户界面如下所示:

<body>
  <form>
      <div>

        <input id="Button1" value="Click Me!" type="button" onclick="OnBtnClick()" /> <br />
        <div id="showMeTheMoneyText"></div>
    </div>
   </form>
<body>

在我的剧本中:

function OnBtnClick() {

    $('Hello World!').appendTo('#showMeTheMoneyText');

    return false;
};

这在UI中绝对没有任何作用。为什么?因为您需要将文本包装在包含要显示的文本的某个HTML标记内(例如

等)

查看我更新的示例:

function OnBtnClick() {

    $('<span>Hello World!</span>').appendTo('#showMeTheMoneyText');

    return false;
};

像魅力一样!

答案 3 :(得分:0)

您必须使用$('#Button1').click而不是$('#Button1').ready