网页制作插入新的元素，并且为插入的元素添加事件

最新推荐文章于 2023-03-16 08:41:53 发布

我是大头鸟

最新推荐文章于 2023-03-16 08:41:53 发布

阅读量1k

点赞数 1

分类专栏： javaScript 文章标签： append 网页添加元素

本文链接：https://blog.csdn.net/datouniao1/article/details/50858101

版权

javaScript 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

怎样向网页中插入新的元素，在JQuery中有这样的几个函数，其实写网页最大的便利也是在于很多的网页动态的实现都有现成的函数，我们需要做的就是在这个环境中应用这些函数，实现我们的动态的操作。

向网页中插入元素有哪些函数可以实现:

append()这个是在被选的元素的结尾插入内容

prepend()在被选的元素的开头插入元素

after()是在被选的元素之后插入元素

before()是在被选的元素之前插入内容

这就是我们的几向网页中插入元素常用到的几个函数，那么怎样来使用这几个函数，我们通过一个例子来解释一下这个函数的使用的过程。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("<b>Append Text</b>");这个地方我们插入的元素是和选中的元素并列的，也即是在原来的元素的结尾
});
$("#btn2").click(function(){
$("ol").append("<li>Append item</li>");我们可在ol元素的范围类插入li，
});
});
function appendText(){
var txt1="<p>Text.</p>"
var txt2=$("<p></p>").text("Text.");
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
$("body").append(txt1,txt2,txt3);我们可以变量，其实这个地方也和我们从数据库中提取元素并且有规律的显示到网页上有很大的帮助关系
// 这件事情告诉我们的是我们可以通过append这个函数向网页上添加新的元素，或者是
// 我们要理解这个所谓的新的元素，实际上是一个变量，我们可以向网页上添加变量，当
// 然这个地方的变量可以是标签或者是文本，其实我们可以这样，从数据库中获取到元素
// 然互将该元素赋值给一个变量，这个时候，
// 然后将变量放到标签上面然后添加到网页上
}
function addbefore(){
var txt1="<p>这个是一个p标签</p>";
$("img").before(txt1);
}
function addafter(){
var txt1="<button id='nihao'>这个是一个button标签</button>";
$("img").after(txt1);
};
$(document).ready(function(){
$("#insert").click(function(){
$(this).after("<p>这个是新插入的一个段落</p>");这个是在元素的后面插入元素
});
});
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();

//在这个地方有必要好好的说一下这个函数，也就是on这个函数，这个函数是一个div调用的，其实也是我们为一个div里面的元素添加事件的一个非常好的例子
});
});
</script>
<title>添加元素</title>
</head>
<body>
<ol>
<li>List item1</li>
<li>List item2</li>
<li>List item3</li>
</ol>
<img src="wang.jpg" style="width:100px;height:100px;display:inline;">
<button id="btn1">addpend Text</button>
<button id="btn2">Append list items</button>
<button οnclick="appendText()">Append Text</button>
<button οnclick="addbefore()">前添加</button>
<button οnclick="addafter()">后添加</button>
<button οnclick="addall()">给所有的button添加一个事件</button>
<p>Click me!</p>
<div>
<button id="insert">Insert a new p element after this button</button>
</div>
</body>
</html>

我是大头鸟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页制作插入新的元素，并且为插入的元素添加事件

怎样向网页中插入新的元素，在JQuery中有这样的几个函数，其实写网页最大的便利也是在于很多的网页动态的实现都有现成的函数，我们需要做的就是在这个环境中应用这些函数，实现我们的动态的操作。向网页中插入元素有哪些函数可以实现:append()这个是在被选的元素的结尾插入内容prepend()在被选的元素的开头插入元素after()是在被选的元素之后插入元素before()是在被选
复制链接

扫一扫