怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个div 怎么用JQuery动态添加div 比如 添加 点击一次添加按...
\u600e\u4e48\u7528JQuery\u52a8\u6001\u6dfb\u52a0div \u6bd4\u5982 \u6dfb\u52a0 \u70b9\u51fb\u4e00\u6b21\u6dfb\u52a0\u6309\u94ae \u589e\u52a0\u4e00\u4e2adivJQuery\u4e2d\u70b9\u51fb\u4e00\u6b21\u6dfb\u52a0\u6309\u94ae\uff0c\u589e\u52a0\u4e00\u4e2adiv\u7684\u601d\u8def\u5982\u4e0b
\u7ed9\u6309\u94ae\u6ce8\u518c\u4e00\u4e2a\u70b9\u51fb\u7684\u76d1\u542c\u4e8b\u4ef6
\u5728\u76d1\u542c\u5668\u4e2d\u521b\u5efa\u4e00\u4e2adiv\u5143\u7d20\u9644\u52a0\u5728\u4e00\u4e2ahtml\u5143\u7d20\u540e\u9762
\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b
#father{ width:150px; height:150px; background-color:red;}#father div{ width:50px; height:50px; background-color:green; font-size:12px;}$(document).ready(function(){ $("#btn").click(function(){ }) //father\u5143\u7d20\u540e\u9762\u589e\u52a0\u4e00\u4e2adiv\u5143\u7d20 $("#father").prepend("\u65b0\u7684div");})
\u52a8\u6001\u6dfb\u52a0dom\u5f88\u7b80\u5355\uff0c\u4f8b\u5982\u4e00\u4e2a\u6309\u94ae\uff0c\u7ed1\u5b9a\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u7136\u540e\u5728\u91cc\u9762\u8fd9\u6dfb\u52a0\u4e8b\u4ef6\u5c31\u884c\u4e86
利用jq的append()追加函数即可实现，如：
html：
<div class="main">
<input type="button" value="添加" class="btn" />
</div>
JQ：
$(document).ready(function(){
$(".btn").click(function(){
var html = '<div style="width:200px; height:30px; border:1px dashed red; margin-bottom:20px;"></div>';
$(".main").append(html);
});
});
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
.div{margin-bottom:5px;background-color:skyblue;}
</style>
</head>
<body>
<a href="javascript:void(0)" class="add">生成一个div元素</a>
<div class="tg"></div>
</body>
<script type="text/javascript">
$(function(){
$(".add").click(function(){
var newObj = $('<div class="div"></div>');
$(".tg").append(newObj);
newObj.text("我是第"+(newObj.index()+1)+"个生成的div").attr("from","new");
});
});
</script>
</html>
使用html()方法添加即可
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛屽苟寮曞叆jquery銆2銆佸湪index.html涓殑鏍囩锛岃緭鍏query浠ｇ爜锛歷ar a = 125;$('body').append('hello');3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鍔ㄦ佹坊鍔燿iv鎴愬姛銆4銆佸啀杈撳叆js浠ｇ爜锛$('#id' + a).remove();銆5銆佸啀杩愯html锛屾鏃跺彂鐜板姩鎬佹坊...
绛旓細1銆侀氳繃jquery缁欏厓绱犲姩鎬佹坊鍔犳牱寮忚繍鐢╝ddClass鍜宺emoveClass鍗冲彲銆傞鍏堝湪html涓噯澶噅query搴撴枃浠讹紝骞朵笖鍑嗗涓涓猟iv鍏冪礌锛屽涓嬪浘鎵绀恒2銆佺劧鍚庡湪style鏍囩閲屽０鏄庝竴涓猚lass鏍峰紡锛屽涓嬪浘鎵绀恒3銆佹帴涓嬫潵鍑嗗涓涓簨浠跺姞杞藉垵濮嬪寲鐨勬柟娉曪紝鍦╦query涓洿鎺ョ敤鍖垮悕鍑芥暟鍗冲彲锛屽涓嬪浘鎵绀恒4銆佺劧鍚庨氳繃jquery鐨刟ddClass鏂规硶...
绛旓細娣诲姞div
绛旓細// 浣犲ソ锛屼互鍦 BODY 鐢熸垚 DIV 涓轰緥瀛愮粰浣犺涓涓惂 var create = 4; // 瀹氫箟涓涓暟瀛楋紝鐢ㄤ簬鎸囧畾瑕佺敓鎴愬灏戜釜DIV var idStr = ""; // 杩欓噷鏄敓鎴愪箣鍚庣殑鎵鏈 div 鐨 id 瀛楃涓 var idList = new Array(); // 杩欓噷鏄敓鎴愪箣鍚庯紝鎵鏈 div 鐨 id 鏁扮粍 $(function...
绛旓細娣诲姞$(function(){ $("#add").on("click",function(){ $("#box").append(""+($("#box div").size()+1)+"鍒犻櫎"); }); $("#box").on("click","div button",function(){ $(this).parent().remove()
绛旓細鍙互浣跨敤append锛宎ppendTo锛屾垨鑰呯洿鎺ュ啓 (id).append(dom)dom.appendTo($(id))(id).html(dom)
绛旓細1銆乯Query璁剧疆css鏍峰紡 娴嬭瘯jQuery鍔ㄦ鑾峰彇padding-left 2銆佺敤css()鏂规硶杩斿洖鍏冪礌鐨勬牱寮忓睘鎬 ("div").css("padding-left"));3銆佺敤css()璁剧疆鏍峰紡 ("div").css("color","yellow");4銆佽缃涓牱寮 ("div").css({"background-color":"yellow","font-size":"200%"});var css = { back...
绛旓細涓嶆槑鐧藉湪璇翠粈涔.(".className")鍙互杩涜鏌ユ壘鐨勩(".className").addClass("className");浣犺骞插槢锛
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html銆2銆佸湪test.html鏂囦欢涓紝鍦╬鏍囩鍐咃紝浣跨敤span鏍囩鍒涘缓涓琛屾枃瀛楋紝span鏍囩鏄痯鏍囩鐨勫瓙鏍囩銆3銆佸湪test.html鏂囦欢鍐咃紝璁剧疆span鍏冪礌鐨刬d涓簃yspan锛屼笅闈㈠皢浣跨敤jquery鏂规硶鑾峰緱璇d鍊笺4銆佸湪test.html鏂囦欢鍐咃紝浣跨敤button鏍囩鍒涘缓涓涓寜閽紝鎸夐挳鍚嶇О涓衡滆幏鍙栧瓙鏍囩鐨処D鍊...
绛旓細娣诲姞鏂板唴瀹圭殑鍥涗釜 jQuery 鏂规硶锛歛ppend() - 鍦ㄨ閫夊厓绱犵殑缁撳熬鎻掑叆鍐呭 prepend() - 鍦ㄨ閫夊厓绱犵殑寮澶存彃鍏ュ唴瀹 after() - 鍦ㄨ閫夊厓绱犱箣鍚庢彃鍏ュ唴瀹 before() - 鍦ㄨ閫夊厓绱犱箣鍓嶆彃鍏ュ唴瀹 jQuery append() 鏂规硶 jQuery append() 鏂规硶鍦ㄨ閫夊厓绱犵殑缁撳熬鎻掑叆鍐呭銆傚疄渚嬶細("p").append("Some appended ...
