该博客展示了如何使用jQuery实现动态创建<span>元素，并将其插入到页面的指定位置。通过点击按钮，一个span标签会在div元素之前插入，改变DOM结构。示例中涉及到了jQuery的选择器、事件处理及DOM操作方法。
1.先写它的body
<body>
<input type="button" value="创建元素" id="btn">
<div id="dv">
<p>这是一个p</p>
</div>
<p>这是div后面的第一个子元素</p>
</body>
2.写它的样式
<style>
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
</style>
3.引入jQuery
<script src="./jQuery/jquery-1.12.2.js"></script>
4.写入点击方式
这里的before就是创建的意思
<script>
$(function(){
// 点击按钮,创建元素
$("#btn").click(function(){
// 把创建的span标签这个子元素直接插入到div中的第一个子元素的前面
// $("#dv").prepend($("<span>this is span</span>"));
// 主动方式
// $("<span>this is span</span>").prependTo($("#dv"));
// 把元素添加到div的后面的位置,是div的下一个兄弟元素了
// $("#dv").after($("<span>this is span</span>"));
// 把元素添加到div的前面的位置,是div的上一个兄弟元素了
$("#dv").before($("<span>this is span</span>"));
})
})
</script>
扫一扫
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
