JQuery动态创建DOM、表单元素

最新推荐文章于 2023-08-03 15:30:00 发布

转载最新推荐文章于 2023-08-03 15:30:00 发布 · 637 阅读

前端同时被 2 个专栏收录

41 篇文章

订阅专栏

jQuery

21 篇文章

订阅专栏

本文介绍如何利用jQuery库动态地在网页中创建各种DOM元素，包括div、input、select等，并展示了如何设置这些元素的属性及事件监听。通过几个具体的实例演示了整个创建过程。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>createElement</title>
<style type="text/css">
    .warpper{ border:1px solid red; padding:8px;}
</style>
<script type="text/javascript" language="javascript" src="jquery-3.1.0.js" ></script>
<script type="text/javascript" language="javascript">
<!--
///动态创建一个div
$(function(){ 
    $('<div />',{
        id:'test',
        text:"this is a div",
        "class":"warpper",
        click:function(){
                var text=$(this).text();
                alert(text);
              }
    }).appendTo("body");
});
 
//创建input:text
$(function(){ 
    $('<input />',{
        type:"text",
        val:"input text somethings...",
        name:"userName"
    }).appendTo("body");        
});
 
//创建input select
$(function(){ 
    var slt=$('<select />',{name:"country" });
    $('<option />',{
            val:"0",
            text:"请选择"
    }).appendTo(slt);
        $('<option>',{
            val:"CN",
            text:"China",
            selected:"selected"
    }).appendTo(slt);
    $("body").append(slt);
});
 
 
//创建radio
$(function(){ 
    $('<input />',{
            type:"radio",
            name:"rdo",
            checked:"checked",
            val:"男"
     }).appendTo("body");
     $('<label>',{
            text:"男",
         }).appendTo("body");   
    $('<input />',{
            type:"radio",
            name:"rdo",
            val:"女"
     }).appendTo("body");
     $('<label>',{
            text:"女"
         }).appendTo("body");        
});
 
//creat checkbox
$(function(){ 
    $('<input />',{
             type:"checkbox",
             name:"cbox",
             val:"1",
             checked:"checked"
         }).appendTo("body");
});
$(function(){ 
    $('<input />',{
            type:"file",
            name:"myfile"   
     }).appendTo("body");
});
//-->
</script>
</head>
 
<body>
<form>
</body>
</html>