通过jquery添加DOM元素

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导航仪检查，以检查是否节点已经存在？

在评论，你说他们缺少的属性，尝试更换双引号包围单引号像这样的html：

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