jQuery .before() inserts before
Syntax and Description
.before(content)
content: An element, an HTML string, or a jQuery object to insert before each matched element.before(function)
function: A function that returns an HTML string to insert before each matched element
Return value is The jQuery object, for chaining purposes.
Insert content specified by the parameter before each element in the set of matched elements.
Consider the following HTML code:
<div class="container">
<h2>Header</h2>// w w w . j a v a2 s .c o m
<div class="inner">Hello</div>
<div class="inner">InnerText</div>
</div>
Create content and insert it before several elements.
$('.inner').before('<p>Test</p>');
The result:
<div class="container">
<h2>Header</h2>//from w ww. ja v a 2 s .co m
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">InnerText</div>
</div>
Select an element on the page and insert it before another.
$('.container').before($('h2'));
An element selected will be moved before the target not cloned.
<h2>Header</h2>//from w w w . jav a2 s.c o m
<div class="container">
<div class="inner">Hello</div>
<div class="inner">InnerText</div>
</div>
Add tag before
Add tag before
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w. j av a 2 s .com-->
$("p").before("<b>Hello</b>");
});
</script>
</head>
<body>
<body>
<b>b</b>
<p>p</p>
</body>
</html>
Add text node before
Add text node before
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . j a v a2s . c o m-->
$("p").before( document.createTextNode("Hello") );
});
</script>
</head>
<body>
<body>
<b>b</b>
<p>p</p>
</body>
</html>
Insert content before each of the matched elements
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww .j a v a 2 s . c o m-->
$("p").before( $("b") );
});
</script>
</head>
<body>
<body>
<b>java2s.com</b>
<p>java2s.com: </p>
</body>
</html>
Inserts some HTML before all paragraphs
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- ww w . jav a 2 s . c om-->
$("p").before("<b>Hello</b>");
});
</script>
</head>
<body>
<body>
<b>java2s.com</b>
<p>java2s.com: </p>
</body>
</html>
Inserts a DOM element before all paragraphs
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . j a va 2 s .c o m-->
$("p").before( document.createTextNode("Hello") );
});
</script>
</head>
<body>
<body>
<b>java2s.com</b>
<p>java2s.com: </p>
</body>
</html>
Add before and after
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(<!--from w w w . j a v a 2 s . c o m-->
function() {
$('p')
.before(
"<h4>Quotes</h4>"
)
.after(
"<p class='tmpAttribution'>\n" +
" - after\n" +
"</p>\n"
);
}
);
</script>
<style type='text/css'>
p {
margin: 5px;
}
p.tmpAttribution {
text-align: right;
}
</style>
</head>
<body>
<p>
java2s.com
</p>
</body>
</html>