如何在jQuery中创建div元素?
当前回答
创建div的一个简单方法是
var customDiv = $("<div/>");
现在,自定义div可以附加到任何其他div。
其他回答
如果它只是一个空div,这就足够了:
$("#foo").append("<div>")
or
$("#foo").append("<div/>")
它给出了相同的结果。
创建内存DIV
$("<div/>");
添加单击处理程序、样式等,最后将其插入到DOM中的目标元素选择器中:
$(“<div/>”{//此处的属性text:“单击我”,id:“示例”,“class”:“myDiv”,//('class'在引号中更好)css:{颜色:“红色”,fontSize:“3em”,光标:“指针”},日期:{mouseenter:函数(){console.log(“请…”+$(this).text());},单击:函数(){console.log(“嗨!我的ID是:”+this.ID);}},追加:“<i>!!</i>”,appendTo:“body”//最后,附加到任何选择器}); // << 这里不需要做任何事情,因为我们在内部定义了财产。<script src=“//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
与ian的答案类似,但我找不到适当处理财产对象声明中方法使用的示例,所以就这样。
如果您想创建任何HTML标记,可以尝试例如
var selectBody = $('body');
var div = $('<div>');
var h1 = $('<h1>');
var p = $('<p>');
如果你想在flay上添加任何元素,可以试试这个
selectBody.append(div);
下面是另一种使用jQuery创建div的技术。
元素克隆
假设您的页面中有一个现有的div,您希望使用jQuery克隆该div(例如,在表单中多次复制输入)。你可以这样做。
$('#clone_button').click(function(){$(“#clone_wrapper div:first”).clone().append('克隆').appendTo($(“#clone_wrapper”));});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“clone_wrapper”><div>Div公司</div></div><button id=“clone_button”>克隆我</按钮>
所有这些都对我有用,
HTML部分:
<div id="targetDIV" style="border: 1px solid Red">
This text is surrounded by a DIV tag whose id is "targetDIV".
</div>
JavaScript代码:
//Way 1: appendTo()
<script type="text/javascript">
$("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>
//Way 2: prependTo()
<script type="text/javascript">
$("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>
//Way 3: html()
<script type="text/javascript">
$("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>
//Way 4: append()
<script type="text/javascript">
$("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>
推荐文章
- 为时刻添加持续时间(moment.js)
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 如何在JavaScript中获得时区名称?
- 在JSON键名中哪些字符是有效的/无效的?
- jQuery中的live()转换为on()
- 如何区分鼠标的“点击”和“拖动”
- IE9是否支持console.log,它是一个真实的功能吗?
- Node.js同步执行系统命令
- 如何转义JSON字符串包含换行字符使用JavaScript?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- jQuery等价于JavaScript的addEventListener方法
- jQuery需要避免的陷阱
- JavaScript中变量字符串的XML解析
- 用jQuery切换DIV背景图像