Append Elements Inside Each Matching Element .append()

.append(content)

content: {One or more DOM elements, arrays of elements, HTML strings, or jQuery objects | Function( Integer index, String html )}
e.g. $("div").append("<b>text</b>")

.append(content) will insert content inside and to the end of each element in the matched set.

Example 1: $("div").append("<span>inserted</span>") will append <span>inserted</span> to each <div>.
Before
<div>
  <b>A</b>
</div>
<div>
  <b>B</b>
</div>
After
<div>
  <b>A</b>
  <span>inserted</span>
</div>
<div>
  <b>B</b>
  <span>inserted</span>
</div>
Example 2: $("div").append("<span>insert1</span>", "<span>insert2</span>") will insert <span>insert1</span><span>insert2</span> inside each <div>.
Before
<div>
  <b>A</b>
</div>
<div>
  <b>B</b>
</div>
After
<div>
  <b>A</b>
  <span>insert1</span>
  <span>insert2</span>
</div>
<div>
  <b>B</b>
  <span>insert1</span>
  <span>insert2</span>
</div>
Example 3: $("div").append($("b")) will move all <b> inside <div>.
Before
<div></div>
<b>A</b>
<b>B</b>
After
<div>
<b>A</b>
<b>B</b>
</div>
Example 4: $("div").append( function(index) { return "<span>"+index+"</span>" ;}) passed functoin will return <span>index</span> for each <div> where index is <div> index in the matched set.
Before
<div>
  <b>A</b>
</div>
<div>
  <b>B</b>
</div>
After
<div>
  <b>A</b>
  <span>0</span>
</div>
<div>
  <b>B</b>
  <span>1</span>
</div>
jQuery manipulation insertion .append()