This repository was archived by the owner on Feb 28, 2021. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 23
Expand file tree
/
Copy pathcreateHTMLstructure.js
More file actions
88 lines (68 loc) · 2.81 KB
/
createHTMLstructure.js
File metadata and controls
88 lines (68 loc) · 2.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
function getElementById(id) {
return document.getElementById(id);
}
function createElement(tag) {
return document.createElement(tag);
}
function createTextStructure() {
const textOutput = getElementById(`textOutput-content`);
const heading = createElement(`h1`);
const contentSummary = createElement(`p`);
const contentTable = createElement(`table`);
const contentDetails = createElement(`p`);
textOutput.style.position = `absolute`;
textOutput.style.left = `-1000px`;
textOutput.style.top = `auto`;
textOutput.style.width = `1px`;
textOutput.style.height = `1px`;
textOutput.style.overflow = `hidden`;
textOutput.appendChild(heading);
textOutput.appendChild(contentSummary);
textOutput.appendChild(contentTable);
textOutput.appendChild(contentDetails);
heading.innerHTML = `Text Output`;
contentSummary.setAttribute(`id`, `textOutput-content-summary`);
contentSummary.setAttribute(`tabIndex`, `0`);
contentSummary.setAttribute(`aria-label`, `text output summary`)
contentSummary.setAttribute(`role`, `main`);
contentTable.setAttribute(`id`, `textOutput-content-table`);
contentTable.setAttribute(`summary`, `text output details`);
contentDetails.setAttribute(`id`, `textOutput-content-details`);
contentDetails.setAttribute(`tabIndex`, `0`);
contentDetails.setAttribute(`aria-label`, `text output details`);
contentDetails.setAttribute(`role`, `main`);
}
function createTableStructure() {
const tableOutput = getElementById(`tableOutput-content`);
const heading = createElement(`h1`);
const contentSummary = createElement(`p`);
const contentTable = createElement(`table`);
const contentDetails = createElement(`div`);
tableOutput.style.position = `absolute`;
tableOutput.style.left = `-1000px`;
tableOutput.style.top = `auto`;
tableOutput.style.width = `1px`;
tableOutput.style.height = `1px`;
tableOutput.style.overflow = `hidden`;
tableOutput.appendChild(heading);
tableOutput.appendChild(contentSummary);
tableOutput.appendChild(contentTable);
tableOutput.appendChild(contentDetails);
heading.innerHTML = `Table Output`;
contentSummary.setAttribute(`id`, `tableOutput-content-summary`);
contentSummary.setAttribute(`tabIndex`, `0`);
contentSummary.setAttribute(`aria-label`, `table text output summary`)
contentSummary.setAttribute(`role`, `main`);
contentTable.setAttribute(`id`, `tableOutput-content-table`);
contentTable.setAttribute(`summary`, `table output details`);
contentDetails.setAttribute(`id`, `tableOutput-content-details`);
contentDetails.setAttribute(`tabIndex`, `0`);
contentDetails.setAttribute(`aria-label`, `table output elements`);
contentDetails.setAttribute(`role`, `main`);
}
if (getElementById(`textOutput-content`)) {
createTextStructure();
}
if (getElementById(`tableOutput-content`)) {
createTableStructure();
}