TypeScript dom.append函數代碼示例

	createTitleArea(parent: HTMLElement): HTMLElement {
		const titleContainer = append(parent, $('div'));
		const titleLabel = append(titleContainer, $('span'));
		titleLabel.id = 'myPart.title';
		titleLabel.innerHTML = 'Title';

		return titleContainer;
	}

	createContentArea(parent: HTMLElement): HTMLElement {
		const contentContainer = append(parent, $('div'));
		const contentSpan = append(contentContainer, $('span'));
		contentSpan.id = 'myPart.content';
		contentSpan.innerHTML = 'Content';

		return contentContainer;
	}

	private drawHueStrip(): void {
		this.hueStrip = $('.strip.hue-strip');
		dom.append(this.domNode, this.hueStrip);

		this.hueSlider = new Slider(this.hueStrip);
		dom.append(this.hueStrip, this.hueSlider.domNode);
		this.hueSlider.top = (this.hueStrip.offsetHeight - this.hueSlider.domNode.offsetHeight) * (this.model.color.getHue() / 359);
	}

	constructor(container: HTMLElement, options: IBaseDropdownOptions) {
		super();

		this._element = append(container, $('.monaco-dropdown'));

		this._label = append(this._element, $('.dropdown-label'));

		let labelRenderer = options.labelRenderer;
		if (!labelRenderer) {
			labelRenderer = (container: HTMLElement): IDisposable | null => {
				container.textContent = options.label || '';

				return null;
			};
		}

		for (const event of [EventType.CLICK, EventType.MOUSE_DOWN, GestureEventType.Tap]) {
			this._register(addDisposableListener(this._label, event, e => EventHelper.stop(e, true))); // prevent default click behaviour to trigger
		}

		for (const event of [EventType.MOUSE_DOWN, GestureEventType.Tap]) {
			this._register(addDisposableListener(this._label, event, e => {
				if (e instanceof MouseEvent && e.detail > 1) {
					return; // prevent multiple clicks to open multiple context menus (https://github.com/Microsoft/vscode/issues/41363)
				}

				if (this.visible) {
					this.hide();
				} else {
					this.show();
				}
			}));
		}

		this._register(addDisposableListener(this._label, EventType.KEY_UP, e => {
			const event = new StandardKeyboardEvent(e);
			if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
				EventHelper.stop(e, true); // https://github.com/Microsoft/vscode/issues/57997

				if (this.visible) {
					this.hide();
				} else {
					this.show();
				}
			}
		}));

		const cleanupFn = labelRenderer(this._label);
		if (cleanupFn) {
			this._register(cleanupFn);
		}

		Gesture.addTarget(this._label);
	}

	private drawOpacityStrip(): void {
		this.opacityStrip = $('.strip.opacity-strip');
		dom.append(this.domNode, this.opacityStrip);
		this.opacityOverlay = $('.opacity-overlay');
		this.fillOpacityOverlay(this.model.color);
		dom.append(this.opacityStrip, this.opacityOverlay);

		this.opacitySlider = new Slider(this.opacityStrip);
		this.opacitySlider.top = this.model.opacity === 1 ? 0 : this.opacityStrip.offsetHeight * (1 - this.model.opacity);
		dom.append(this.opacityStrip, this.opacitySlider.domNode);
	}

	constructor(private model: ColorPickerModel, widgetNode: HTMLElement, private pixelRatio: number) {
		this.domNode = $('.saturation-wrap');
		dom.append(widgetNode, this.domNode);

		// Create canvas, draw selected color
		this.saturationCanvas = document.createElement('canvas');
		this.saturationCanvas.className = 'saturation-box';
		dom.append(this.domNode, this.saturationCanvas);

		// Add selection circle
		this.saturationSelection = $('.saturation-selection');
		dom.append(this.domNode, this.saturationSelection);
	}

function renderDashboardInsights(onDetailsToggle: Function, contributionReader: ContributionReader, container: HTMLElement): boolean {
	let insights = contributionReader.dashboardInsights();

	if (!insights || !insights.length) {
		return false;
	}

	const details = $('details', { open: true, ontoggle: onDetailsToggle },
		$('summary', null, localize('insights', "Dashboard Insights ({0})", insights.length)),
		$('table', null,
			$('tr', null,
				$('th', null, localize('insightId', "Id")),
				$('th', null, localize('name', "Name")),
				$('th', null, localize('insight condition', "When"))
			),
			...insights.map(insight => $('tr', null,
				$('td', null, $('code', null, insight.id)),
				$('td', null, insight.contrib.name ? insight.contrib.name : insight.id),
				$('td', null, insight.contrib.when),
			))
		)
	);

	append(container, details);
	return true;
}

function renderDashboardTabs(onDetailsToggle: Function, contributionReader: ContributionReader, container: HTMLElement): boolean {
	let tabs = contributionReader.dashboardTabs();

	if (!tabs || !tabs.length) {
		return false;
	}

	const details = $('details', { open: true, ontoggle: onDetailsToggle },
		$('summary', null, localize('tabs', "Dashboard Tabs ({0})", tabs.length)),
		$('table', null,
			$('tr', null,
				$('th', null, localize('tabId', "Id")),
				$('th', null, localize('tabTitle', "Title")),
				$('th', null, localize('tabDescription', "Description"))
			),
			...tabs.map(tab => $('tr', null,
				$('td', null, $('code', null, tab.id)),
				$('td', null, tab.title ? tab.title : tab.id),
				$('td', null, tab.description),
			))
		)
	);

	append(container, details);
	return true;
}

	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
		this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label')));

		this.labelDescriptionContainer = new FastLabelNode(dom.append(this.domNode.element, dom.$('.monaco-icon-label-description-container')));

		if (options && options.supportHighlights) {
			this.labelNode = new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name')));
		} else {
			this.labelNode = new FastLabelNode(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name')));
		}

		if (options && options.supportDescriptionHighlights) {
			this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description')));
		} else {
			this.descriptionNodeFactory = () => new FastLabelNode(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description')));
		}
	}

		const labelRenderer: ILabelRenderer = (el: HTMLElement): IDisposable | null => {
			this.element = append(el, $('a.action-label.icon'));
			addClasses(this.element, this.clazz);

			this.element.tabIndex = 0;
			this.element.setAttribute('role', 'button');
			this.element.setAttribute('aria-haspopup', 'true');
			this.element.title = this._action.label || '';

			return null;
		};