新聞中心
用jq添加或移除div
問題分析:
站在用戶的角度思考問題,與客戶深入溝通,找到湖濱網(wǎng)站設(shè)計(jì)與湖濱網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋湖濱地區(qū)。
1、刪除:使用jQuery的remove方法。
2、添加:使用jQuery的append、after等多個(gè)方法,這些不同的方法是用來決定標(biāo)簽添加的相對位置。
舉例如下:
以內(nèi)部追加方法append為例。
添加DIV:
$('body').append('div?id="name"我是被添加的DIV標(biāo)簽/div');
刪除剛剛添加的DIV:
$('#name').remove();
怎樣用jquery為div添加一個(gè)div
使用attr()或prop()方法為id屬性賦值即可,關(guān)鍵代碼
$(obj_div).attr('id',id_name);
$(obj_div).prop('id',id_name);
實(shí)例演示如下:點(diǎn)擊按鈕設(shè)置div標(biāo)簽的id為test,為了便于觀察效果,css中設(shè)置了id為test的樣式為紅色
1、HTML結(jié)構(gòu)
style
#test{color:red !important; font-weight:bold;}
/style
div我是示例DIV/div
input type="button" value="設(shè)置上一個(gè)div的id為test"
2、jquery代碼
$(function(){
$("input:button").click(function() {
$(this).prev("div").attr("id","test");
});
});
jquery 向DIV動(dòng)態(tài)添加元素
1、通過jquery給元素動(dòng)態(tài)添加樣式運(yùn)用addClass和removeClass即可。首先在html中準(zhǔn)備jquery庫文件,并且準(zhǔn)備一個(gè)div元素,如下圖所示。
2、然后在style標(biāo)簽里聲明一個(gè)class樣式,如下圖所示。
3、接下來準(zhǔn)備一個(gè)事件加載初始化的方法,在jquery中直接用匿名函數(shù)即可,如下圖所示。
4、然后通過jquery的addClass方法給div元素添加一個(gè)class,如下圖所示。
5、移除一個(gè)class的樣式也很簡單,如下圖所示,通過removeClass即可。
怎么用JQuery動(dòng)態(tài)添加div 比如 添加 點(diǎn)擊一次添加按鈕 增加一個(gè)div
!doctype?html
html
head
meta?charset="utf-8"
title插入輸入框/title
script?type="text/javascript"?src="js/jquery-3.1.1.min.js"/script
script
function?f1(){
var?text='div?class="a1"/divinput?type="text"br';
if($("#a1").val()!="")
{
$("#baojie?li").append(text);
};
};
/*function?f1(btn){
var?x?=?document.createElement("li");
var?z=document.getElementById("baojie");
var?input=document.getElementById("a1");
?? var?name?=?input.value;
if(name?!=?""){
z.appendChild(x).innerHTML='div?class="a1"'+'/div'+'input?type="text"'+'br';
}else{
return;
}
??}*/
/script
style?type="text/css"
.neirong?li{
?list-style-type:none;
?display:inline;
}
.neirong{
width:400px;
margin:0?auto;
}
.neirong?div{
text-align:center;
width:50px;
display:inline-block;
margin:10px?0;
}
.neirong?#btn{
background:none;
border:none;
color:#3d8ad4;
}
.neirong?.a1{
height:16px;
width:58px;
}
/style
/head
body
!--logo--
div?class="neirong"
form
uldiv時(shí)間/div
li
input?type="text"
/li
/ul
ul?id="baojie"div保潔員/div
li
input?type="text"??id="a1"/input?type="button"?value="+添加一行"?id="btn"??onClick="f1(this)"?/br/
/li
/ul
uldiv費(fèi)用/div
li
input?type="text"
/li
/ul
/form
/div
/body
/html
這是我寫的一個(gè)點(diǎn)擊按鈕添加輸入框的代碼,你可以參考一下(注意,我這是必須在輸入框里輸入內(nèi)容后才能添加)
本文題目:jquery添加div,jQuery添加標(biāo)簽
文章路徑:http://fisionsoft.com.cn/article/dsipeog.html