How to use the metal-dom.append function in metal-dom

it('should attach listeners on existing children from the given element', function() {
			class TestComponent extends Component {
				render() {
					IncDom.elementOpen('div');
					IncDom.elementVoid('div', null, null, 'data-onclick', 'handleClick');
					IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;
			TestComponent.prototype.handleClick = sinon.stub();

			var element = document.createElement('div');
			dom.append(element, '<div></div>');
			var innerElement = element.childNodes[0];
			component = new TestComponent({
				element: element
			});
			assert.strictEqual(innerElement, component.element.childNodes[0]);

			dom.triggerEvent(innerElement, 'click');
			assert.strictEqual(1, component.handleClick.callCount);
		});

it('should override existing content if element tag is different from what would be rendered', function() {
			class TestComponent extends Component {
				render() {
					IncDom.elementOpen('div');
					IncDom.elementOpen('div', null, 'class', 'inner');
					IncDom.text('foo');
					IncDom.elementClose('div');
					IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;

			var element = document.createElement('div');
			dom.append(element, '<span class="inner">foo</span>');
			var innerElement = element.querySelector('.inner');
			component = new TestComponent({
				element: element
			});

			assert.strictEqual(element, component.element);
			assert.notStrictEqual(innerElement, component.element.querySelector('.inner'));
			assert.strictEqual('foo', component.element.textContent);
		});

it('should trigger listeners that bubbled from sub components to correct element', function() {
		var custom = createCustomComponentInstance('<div data-onclick="handleClick"></div>');
		custom.handleClick = sinon.stub();

		var child = createCustomComponentInstance('<div data-onclick="handleClick"></div>');
		child.handleClick = sinon.stub();
		dom.append(custom.element.childNodes[0], child.element);

		var collector = new EventsCollector(custom);
		collector.startCollecting();
		collector.attachListener('click', 'handleClick');
		var childCollector = new EventsCollector(child);
		childCollector.startCollecting();
		childCollector.attachListener('click', 'handleClick');

		dom.triggerEvent(child.element.childNodes[0], 'click');
		assert.strictEqual(1, custom.handleClick.callCount);
		assert.strictEqual(1, child.handleClick.callCount);
	});

function createCustomComponentInstance(content) {
		class CustomComponent extends Component {
		}
		var comp = new CustomComponent();
		dom.append(comp.element, content);
		return comp;
	}
});

addContent(screenId, opt_content) {
		var child = this.defaultChild;

		if (isDefAndNotNull(opt_content)) {
			child = this.getChild(screenId);
			if (child) {
				removeChildren(child);
			} else {
				child = this.createChild(screenId);
				this.transition(child, null);
			}
			append(child, opt_content);
		}

		var element = this.getElement();

		if (element && child) {
			append(element, child);
		}

		return child;
	}

function buildParentIfNecessary_(element) {
	if (!element || !element.parentNode) {
		let parent = {};
		if (typeof document !== 'undefined') {
			parent = document.createElement('div');
		}
		if (element) {
			append(parent, element);
		}
		return parent;
	}
}

if (isDefAndNotNull(opt_content)) {
			child = this.getChild(screenId);
			if (child) {
				removeChildren(child);
			} else {
				child = this.createChild(screenId);
				this.transition(child, null);
			}
			append(child, opt_content);
		}

		var element = this.getElement();

		if (element && child) {
			append(element, child);
		}

		return child;
	}