Question

确定。我试图让jQuery在我的html中插入一个div，但它不会，或者至少，我看不到它有任何影响。

jQuery：

$(document).ready(function(){
    $("#ml1").click(function(){
        $("#container").append("<div id='overlay'></div>");
    });
});

html：

<body>
      <div id="container">
            <header>
                Header
            </header>
            <div id="left" class="panel">
                <div id="main">
                    <ul>
                        <li id= "ml1"><a href="#">%</a></li>
                        <li id= "ml2"><a href="#">%</a></li>
                        <li id= "ml3"><a href="#">%</a></li>

我知道没有一个html关闭。我只是给了一小块参考资料。注意：我还在CSS文件中给#overlay一些尺寸和颜色，因此它应该显示在页面上。

当我在我的html中直接插入t <div id='overlay'></div>时，在#container下，它有效果，但是我无法用jQuery做任何事情。我已经尝试将点击应用到＆＃34; a href＆＃34;元素也是如此。

我的最终目标是创建一个叠加div，只要点击列表中的某个项目就会出现，但此刻我只想尝试让新div出现。如果有人想就长期目标向我提出建议，请随意。

Answer 1

试试这个：因为你没有注意到你的代码已经在工作，但只是为了让你清楚地了解你的查询，我正在用小提琴链接分享这段代码：

链接：http://jsfiddle.net/Q2vby/

HTML CODE：

<div id="container">
    <header>Header</header>
    <div id="left" class="panel">
        <div id="main">
            <ul>
                <li id="ml1"><a href="#">ml1</a>
                </li>
                <li id="ml2"><a href="#">ml2</a>
                </li>
                <li id="ml3"><a href="#">ml3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS代码：

#overlay {
    background:#dadada;
    opacity:0.8;
    display:block;
    width:400px;
    height:400px;
}

JS CODE：

$(document).ready(function () {
    $("#ml1").click(function () {
        $("#container").after("<div id='overlay'></div>");
    });
});

Answer 2

感谢所有人（很高兴看到人们在代码中提到的无法预料的问题）。没有加载jQuery是问题（n00b错误，我害怕）。我被错误的图书馆链接了。

RealDeepak：谢谢你的回答。我注意到你用“.after”替换了“.append”。如果你能详细说明你改变的原因，我将不胜感激。

如何在我的页面上显示我正在使用jQuery附加到我的html的div？

2 个答案: