如何在jQuery中创建div元素?
当前回答
我认为这是添加div的最佳方法:
要将测试div附加到ID为div_ID的div元素,请执行以下操作:
$("#div_id").append("div name along with id will come here, for example, test");
现在将HTML附加到这个添加的测试div中:
$("#test").append("Your HTML");
其他回答
div = $("<div>").html("Loading......");
$("body").prepend(div);
所有这些都对我有用,
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>
d = document.createElement('div');
$(d).addClass(classname)
.html(text)
.appendTo($("#myDiv")) //main div
.click(function () {
$(this).remove();
})
.hide()
.slideToggle(300)
.delay(2500)
.slideToggle(300)
.queue(function () {
$(this).remove();
});
如果您使用Jquery>1.4,您最好使用Ian的答案。否则,我将使用此方法:
这与celoron的答案非常相似,但我不知道他们为什么使用document.createElement而不是Jquery表示法。
$("body").append(function(){
return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
.attr("id","myDivId")
.addClass("myDivClass")
.css("border", "solid")
.append($("<p/>").html("I think, therefore I am."))
.append($("<p/>").html("The die is cast."))
});
//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));
我还认为,在这种情况下,将append()与回调函数一起使用更可读,因为您现在马上就可以看到将要向主体添加的内容。但这是一个品味问题,在编写任何代码或文本时总是如此。
通常,在JQuery代码中使用尽可能少的HTML,因为这大部分是意大利面代码。它容易出错,很难维护,因为HTML字符串很容易包含拼写错误。此外,它将标记语言(HTML)与编程语言(Javascript/Jquery)混合在一起,这通常是一个坏主意。
$("<div/>").attr('id','new').appendTo('body');
这将在body中创建id为“new”的新div。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求