Available on: InDom, InDomArray

Appends one or more HTML strings, DOM elements or InDom objects to the end of the underlying element(s).

Parameters:

Returns: {InDom | InDomArray} - this for chaining

Throws:

Note:
If an argument is a string, it’s parsed as HTML and inserted. Sanitize untrusted strings before passing them.

Examples:

<ul class="example-1"><li>li 1</li><li>li 2</li></ul>
<div class="example-2"><span>span 1</span><div>div 1</div><div>div 2</div></div>

//isolated steps
const ul = $1('ul.example-1');

// raw HTML string
ul.append('<div>test</div>');
console.log(ul.getHtml()); 
// <li>li 1</li><li>li 2</li><div>test</div>

// native DOM element
const img = new Image();
img.src = 'example-star.png';
img.width = img.height = 50;
ul.append(img);
console.log(ul.getHtml()); 
// <li>li 1</li><li>li 2</li><img …>

// InDom object
ul.append($n(img)); // same img, in InDom object
console.log(ul.getHtml()); // identical markup
// <li>li 1</li><li>li 2</li><img …>

// InDomArray (moved from .example-2)
const donor = $1('.example-2');
ul.append($a('>div', donor)); // moves both divs
console.log(ul.getHtml());
// <li>li 1</li><li>li 2</li><div>div 1</div><div>div 2</div>
console.log(donor.getHtml()); 
// <span>span 1</span> (divs gone)

// bulk append to every <li> of ul
$a('>li', ul).append('<span>test</span>');
console.log(ul.getHtml()); 
// <li>li 1<span>test</span></li><li>li 2<span>test</span></li>