JavaScript DHTML/jQuery/wrapAll
Содержание
Wrap all elements
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrapAll(document.createElement("div"));
});
</script>
<style>
div { border: 2px solid blue; }
</style>
</head>
<body>
<body>
Hello
Hello
Hello
</body>
</html>
</source>
wrapAll(html): each element in the matched set would get wrapped with an element.
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrapAll($(".doublediv"));
});
</script>
<style>
.doublediv { color:red; }
</style>
</head>
<body>
<body>
World
World
asdf
</body>
</html>
</source>
Wrap all with border
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrapAll("");
});
</script>
<style>
div { border: 2px solid blue; }
</style>
</head>
<body>
<body>
Hello
Hello
Hello
</body>
</html>
</source>
WrapAll With More Than One Tag
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrapAll("asdf
");
});
</script>
<style>
div { border: 2px solid blue; }
</style>
</head>
<body>
<body>
Hello
Hello
Hello
</body>
</html>
</source>
Wrap tag created by document.createElement
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() {
$("p").wrapAll(document.createElement("div"));
}
);
</script> <style type="text/css">
h4, p {
margin: 5px;
} div {
background: #70d6f0; border: 3px solid #7ac3d5; margin: 3px;
}
</style> </head> <body>
asdf
</body>
</html>
</source>