如何使用Jquery在单击时将<p>添加到<div>

debugcn 发表于 Dev

昆巴拉

我有一个确定的简单问题。我是编码的新手，只是学习html / css / jquery的基础知识。我正在尝试通过单击将内容加载到。这是我的代码，感谢您的耐心配合。

html:
 <!DOCTYPE html>
<html>
<head>
<link type="text/javascript" src="wedding_projectJQuery.js"></link>
<link type="text/css" rel="stylesheet" href="wedding_projectStyles.css"/>
<title>Jason & Ashley Wedding</title>
</head>

<body>
    <h1>Jason & Ashley's Wedding Website</h1>
    <div id="loader"></div>
    <table>
        <tr>
            <td id="date">Date</td>
            <td id="photos">Photos</td>
            <td id="donate">Donate</td>
        </tr>

    </table>
</body>

</html>

CSS：

h1 {
    text-align:center;
}


#loader {
    text-align:center;
    border: 2px solid black;
    margin:auto;
    height: 500px;
    width: 1000px;
}

table {
    padding:0px;
    border: 2px solid black;
    width:1000px;
    height:75px;
    margin:2px auto;
    clear:both;
}
td {
    width:250px;
    margin:0px;
    padding:0px;
    text-align:center;
    border: 1px solid black;
    padding:0px;
    margin:0px;
}
td:hover {
    background-color:green;
}

jQuery：

$(document).ready(function(){
    $("#date").click(function(){
        $("#loader").prepend('<p>The date is October 25th, 2014. The ceremony will begin when the fat lady sings.</p>');

    });

});

费利克斯

您需要在页面中包含jQuery，它应该可以工作。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="wedding_projectJQuery.js"></script>

另请注意，您需要使用<script></script>而不是<link />包含Javascript文件

小提琴演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。