Available on: InDom, InDomArray

Inserts one or more HTML strings, DOM elements or InDom objects after the underlying element(s).
When multiple items are provided they are inserted in reverse order so the first item appears first in the DOM.

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');
const firstLi = $1(">li",ul);

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

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

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

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

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