插入节点

来源：互联网发布：淘宝直通车溢价比例编辑：程序博客网时间：2024/06/05 08:28

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

.active{

width:100px;

height:100px;

background-color: gold;

}

</style>

<scriptsrc="js/jquery-2.1.3.min.js"type="text/javascript" charset="utf-8"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$(document).click(function(){

// append添加新的DOM节点，在最后

// $("body").append("<div class='active'>这是append添加的div</div>");

// $("<div class='active'>这是append添加的div</div>").appendTo("body");

// $("div").addClass("active");

// prepend添加新的DOM节点，在最前面

// $("body").prepend("<div class='active'>这是prepend添加的div2</div>");

// $("<div class='active'>这是prepend添加的div2</div>").prependTo("body");

$("p").after("<div class='active'>after</div>");

$("span").before("<div class='active'>before</div>");

$("<div class='active'>insertAfter</div>").insertAfter("span");

$("<div class='active'>insertBefore</div>").insertBefore("a");

})

</script>

</head>

<body>

<p>ppppp</p>

<div>dsklja</div>

<a href="">dsgfsdf</a>

</body>

</html>

0 0