Question

我是使用html和CSS的初学者。我对UI上的显示有疑问。我有一个html结构的主体如下：

    <div id="wrapper">


        <div id="main">

        <input type="text" id="search"></input> <button id="sub" value="Search"></button>
            <div id="reel">
            <!-- ******************************************************************************************** -->
            <!-- ******************************************************************************************** -->


                <!-- Header Item -->

                    <div id="header" class="item" data-width="400">
                        <h1>test</h1>
                        <p>test</p>
                    </div>

                <!-- Thumb Items -->

                    <article class="item thumb" data-width="282">
                        <h2>You really got me</h2>
                        <a href="images/fulls/01.jpg"><img src="images/thumbs/01.jpg" alt=""></a>
                    </article>



            </div>
        </div>

    </div>

</body>

我用css来显示图像库，（目前没有图像，但在“文章”标签内）。我想通过jquery动态添加文章，我使用以下代码：

$("#reel").append("<article class=\"item thumb\" data-width=\"282\"></article>");

这应该基本上在库中创建一个空图像（我已经厌倦了添加到html页面）。但是，当我执行jquery时，在UI上看不到任何内容。我可以从firebug中看到jquery执行的代码。

Answer 1

您需要将article转换为html节点，jquery有一个简写方法：

var $node = $('<article />');
console.log($node);
[article, constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]

在内存中创建一个新节点。

然后，为了使你的功能起作用，你需要将追加更改为

$("#reel").append($("<article class=\"item thumb\" data-width=\"282\"></article>"));

喝彩！

修改

正如在注释中指出的那样，jquery会自动为您执行此操作，您可能会附加节点，是否已使用DOM导航器检查该节点是否已存在？

在评论中你说他们缺少属性，试着用单引号替换用双引号括起来的双引号：

$("#reel").append('<article class="item thumb" data-width="282"></article>');

通过jquery添加DOM元素

1 个答案: