Append()
Insert content at the end of each element in the set of matched
elements. See also: prepend()
append(content)
Insert content as the last element to each element in the set
of matched elements. Append creates a new resultset
which is used in chained functions. In case a plain text string (text
node) is provided the content is automatically wrapped in a <span>
elemement to avoid orphan text nodes directly in the body element.
- content HTML string, string or HTML string to insert after the matched elements.
| Examples | Before | After |
|---|---|---|
| Find: #box, Type: selector results.append("<p>Peter Parker</p>"); |
<div id="box"> <h1>Personal information</h1> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
| Find: .name, Type: selector results.append("Peter Parker"); |
<div> <h1>Personal information</h1> <p class="name"><b>Name: </b></p> </div> |
<div> <h1>Personal information</h1> <p class="name"><b>Name: </b><span>Peter Parker</span></p> </div> |
| Insert content to multiple <div> elements
at once Find: div, Type: selector results.append("<p>Peter Parker</p>"); |
<div> <h1>Personal information</h1> </div> <div> <h1>Personal information</h1> </div> |
<div> <h1>Personal information</h1> <p>Peter Parker</p> </div> <div> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
| Append snippet var a = loadhtml('snippets/snippet_name.html'); results.append(a);
|
<div id="box"> <h1>Personal information</h1> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
| query("#box").append("<p>Peter
Parker</p>"); |
<div id="box"> <h1>Personal information</h1> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
| query("#box").append("<p>Peter Parker</p>").css("color","red"); | <div id="box"> <h1>Personal information</h1> </div> |
<div id="box" style="color: red;"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |