append()

A SniperJs method used to insert specified content at the end or the beginning of the selected elements.

Parameters of Sniper append() method

Parameter
Description

Content

It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are:

  • HTML elements

  • DOM elements

Function (current_html)

It is an optional parameter. It specifies the function that returns the content to insert.

  • current_html: The current HTML of the selected element.

prepend? (boolean)

if true, the content is inserted at the beginning of the selected element, if false it goes to the end of the element. Default is false.

Append HTML String

$("p").append("<b>Newly added appended text</b>."); 
//the element is inserted at the end of the selected element
$("ol").append("<li><b>Newly added appended item</b></li>",true);
//this goes to the beginning of the selected element

Inserting DOM Element

The following code query's an element with the ID of mylink and insert into the p element

$("p").append($('#mylink'));

Prepend element

The following code query's an element with the ID of .text and insert at the beginning of the div element

$("#div").append($('#text'),true);

Inserting content using a function

$("p").append(function(html){
  return "<b>This is the html content for this p </b> <br/>"+html;
});

Inserting Array of elements or Nodelists

const mylists = $('ul li*'); //this returns NodeLists
$("#div").append(mylists);

$("#div").append([$('a'),$('p'),$('mydiv')]);
const mytext = $('#text');
const div = $('.my-containter');
const p = $('#p');

$("#div").append([p,div,mytext]);

Last updated