jQuery: The Write Less, Do More JavaScript Library

Manipulation/prepend

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

[edit]

prepend( content )

Prepend content to the inside of every matched element.
This operation is the best way to insert elements inside, at the beginning, of all matched elements.
Arguments:
contentString, Element, jQuery
Content to prepend to the target.

Examples:
Prepends some HTML to all paragraphs.

$("p").prepend("<b>Hello </b>");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").prepend("<b>Hello </b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>there friend!</p>
  <p>amigo!</p>
</body>
</html>

Prepends a DOM Element to all paragraphs.

$("p").prepend(document.createTextNode("Hello "));


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").prepend(document.createTextNode("Hello "));
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>is what I'd say</p>
  <p>is what I said</p>
</body>
</html>

Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

$("p").prepend( $("b") );


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").prepend( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p> is what was said.</p><b>Hello</b>
</body>
</html>

NameType

Retrieved from "http://docs.jquery.com/Manipulation/prepend"