<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入节点</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// window.onload=function(){
// var div = document.getElementsByTagName("div")[0];
// var h1 = document.createElement("h1");
// // appendChild()会添加到指定元素div的尾部,即p元素后
// // div.appendChild(h1);
// // insertBefore(),h1是新节点,div.firstChild是位置,表示此节点前
// // div.insertBefore(h1,div.firstChild);
// div.insertBefore(h1,div.lastChild);
// }
$(function(){
// append()插入到指定节点最后端
// $("div").append("<p>段落文字3</p>");
// 可用于调换位置
// $("div").append($("ul"));
// n表示指定节点的index标志位
// $("div").append(function(n){
// return "<p>新段落"+n+"</p>";
// });
// appendTo()将元素添加到指定元素后
// $("ul").appendTo($("div"));
// prepend()插入到指定节点最前端
// $("div").prepend("<p>段落文字4</p>");
// 同appendTo()
// $("ul").prependTo($("div"));
});
</script>
</head>
<body>
<div>
<p>段落文字1</p>
</div>
<div></div>
<p>段落文字2</p>
<ul>
<li>li1</li>
<li>li2</li>
</ul>
</body>
</html>
插入节点
最新推荐文章于 2022-07-31 14:45:05 发布