jquery添加div,jQuery添加标签
用jq添加或移除div
问题分析:
站在用户的角度思考问题,与客户深入沟通,找到湖滨网站设计与湖滨网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广、主机域名、雅安服务器托管、企业邮箱。业务覆盖湖滨地区。
1、删除:使用jQuery的remove方法。
2、添加:使用jQuery的append、after等多个方法,这些不同的方法是用来决定标签添加的相对位置。
举例如下:
以内部追加方法append为例。
添加DIV:
$('body').append('div id="name"我是被添加的DIV标签/div');
删除刚刚添加的DIV:
$('#name').remove();
怎样用jquery为div添加一个div
使用attr()或prop()方法为id属性赋值即可,关键代码
$(obj_div).attr('id',id_name);
$(obj_div).prop('id',id_name);
实例演示如下:点击按钮设置div标签的id为test,为了便于观察效果,css中设置了id为test的样式为红色
1、HTML结构
style
#test{color:red !important; font-weight:bold;}
/style
div我是示例DIV/div
input type="button" value="设置上一个div的id为test"
2、jquery代码
$(function(){
$("input:button").click(function() {
$(this).prev("div").attr("id","test");
});
});
jquery 向DIV动态添加元素
1、通过jquery给元素动态添加样式运用addClass和removeClass即可。首先在html中准备jquery库文件,并且准备一个div元素,如下图所示。
2、然后在style标签里声明一个class样式,如下图所示。
3、接下来准备一个事件加载初始化的方法,在jquery中直接用匿名函数即可,如下图所示。
4、然后通过jquery的addClass方法给div元素添加一个class,如下图所示。
5、移除一个class的样式也很简单,如下图所示,通过removeClass即可。
怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个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时间/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费用/div
li
input type="text"
/li
/ul
/form
/div
/body
/html
这是我写的一个点击按钮添加输入框的代码,你可以参考一下(注意,我这是必须在输入框里输入内容后才能添加)
当前文章:jquery添加div,jQuery添加标签
本文路径:http://scyanting.com/article/dsipeog.html