基于Jquery的动态创建DOM元素的代码

最新推荐文章于 2023-06-26 13:49:59 发布

转载最新推荐文章于 2023-06-26 13:49:59 发布 · 1k 阅读

JavaScript 专栏收录该内容

311 篇文章

订阅专栏

本文介绍如何使用jQuery动态创建页面元素，包括div和input，并为它们添加样式和交互事件。

转自： http://www.jb51.net/article/25755.htm

jquery动态创建页面元素，mark一下，以备以后查询时使用。以创建div和input为例。
动态创建div:
代码如下:

$(function(){ 
  $("<div>",{ 
     id: 'test', 
     text: 'this is a test', 
     "class": "test", 
     click: function(){ 
        $(this).toggleClass('test'); 
      } 
   }).appendTo("body"); 
})

动态创建input:
代码如下:

$(function(){ 
  $("<input>", { 
     type: 'text', 
     val: 'test', 
     focusin: function() { 
       $(this).addClass('active'); 
     }, 
     focusout: function() { 
       $(this).removeClass('active'); 
     } 
   }).appendTo("body"); 
})