Add Elements

by narensrinivasans

HTML

<p id="insAftButton">insertAfter</p>
<p id="insBefButton">insertBefore</p>
<p id="preToButton">prependTo</p>
<p id="appToButton">appendTo</p>
<p id="cloneButton">clone</p>
<p id="removeButton">Remove All</p>

<br />
<h4 id="disclaimer">Disclaimer</h4>

<h5 class="note">// Insert Function add <span class="green">a separate tag</span> with mentioned selector</h5>
<h5 class="note">// Append Function add <span class="green">a child tag</span> with mentioned selector</h5>

CSS

p {
    background: whitesmoke;
    border: 1px solid gray;
    cursor: pointer;
    color: grey;
    display: inline-block;
    padding: 4px 12px;
}
p:hover {
    border-color: black;
    color: black;
}
.green, .newlyAdded {
    color: green;
}
.red {
    color: red;
}
.note {
    color: grey;
    font-size: 16px;
    font-style: oblique;
    font-weight: normal;
    line-height: 16px;
    margin: 5px 0;
}

JavaScript

$('#insAftButton').click(function() {
    $('<span class="newlyAdded">Inserted After Diclaimer</span>').insertAfter('#disclaimer');
});
$('#insBefButton').click(function() {
    $('<span>', {
        id: 'insBef',
        text: 'Inserted Before Diclaimer',
        class: 'newlyAdded'
    }).insertBefore('#disclaimer');
});
$('#preToButton').click(function() {
    $('<span class="newlyAdded">Prepend To Diclaimer</span>').prependTo('#disclaimer');
});
$('#appToButton').click(function() {
    $('<span class="newlyAdded">Append To Diclaimer</span>').appendTo('#disclaimer');
});
$('#cloneButton').click(function() {
    $('#disclaimer').clone().appendTo('#disclaimer').addClass('newlyAdded');
});
$('#removeButton').click(function() {
    $('.newlyAdded').remove();
});