DOM div in div

UK map

1) UK contains England

Input

let a = document.createElement('div'); a.innerHTML = 'A'; let b = document.createElement('div'); b.innerHTML = 'B'; document.body.append(a); a.append(b); let css = document.createElement('style'); document.head.append(css); css.innerText = ` div{ border:solid; padding: 1ex; margin: 1ex; } `;

xxxxxxxxxx

 

1

let a = document.createElement('div');

2

a.innerHTML = 'A';

3

let b = document.createElement('div');

4

b.innerHTML = 'B';

5

document.body.append(a);

6

a.append(b);

7

​

8

​

9

let css = document.createElement('style');

10

document.head.append(css);

11

css.innerText = `

12

div{

13

  border:solid;

14

  padding: 1ex;

15

  margin: 1ex;

16

}

17

`;

Go reset

Output

let a = document.createElement('div');
a.innerHTML = 'A';
let b = document.createElement('div');
b.innerHTML = 'B';
document.body.append(a);
a.append(b);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

let a = document.createElement('div');
a.innerHTML = 'UK';
let b = document.createElement('div');
b.innerHTML = 'England';
document.body.append(a);
a.append(b);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

2) UK contains England, England contains London

Input

let a = document.createElement('div'); a.innerHTML = 'A'; let b = document.createElement('div'); b.innerHTML = 'B'; document.body.append(a); a.append(b); let css = document.createElement('style'); document.head.append(css); css.innerText = ` div{ border:solid; padding: 1ex; margin: 1ex; } `;

xxxxxxxxxx

 

1

let a = document.createElement('div');

2

a.innerHTML = 'A';

3

let b = document.createElement('div');

4

b.innerHTML = 'B';

5

document.body.append(a);

6

a.append(b);

7

​

8

​

9

let css = document.createElement('style');

10

document.head.append(css);

11

css.innerText = `

12

div{

13

  border:solid;

14

  padding: 1ex;

15

  margin: 1ex;

16

}

17

`;

Go reset

Output

let a = document.createElement('div');
a.innerHTML = 'A';
let b = document.createElement('div');
b.innerHTML = 'B';
document.body.append(a);
a.append(b);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

let a = document.createElement('div');
a.innerHTML = 'UK';
let b = document.createElement('div');
b.innerHTML = 'England';
let c = document.createElement('div');
c.innerHTML = 'London';
document.body.append(a);
a.append(b);
b.append(c);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

3) UK contains England and Scotland

Input

let a = document.createElement('div'); a.innerHTML = 'A'; let b = document.createElement('div'); b.innerHTML = 'B'; document.body.append(a); a.append(b); let css = document.createElement('style'); document.head.append(css); css.innerText = ` div{ border:solid; padding: 1ex; margin: 1ex; } `;

xxxxxxxxxx

 

1

let a = document.createElement('div');

2

a.innerHTML = 'A';

3

let b = document.createElement('div');

4

b.innerHTML = 'B';

5

document.body.append(a);

6

a.append(b);

7

​

8

​

9

let css = document.createElement('style');

10

document.head.append(css);

11

css.innerText = `

12

div{

13

  border:solid;

14

  padding: 1ex;

15

  margin: 1ex;

16

}

17

`;

Go reset

Output

let a = document.createElement('div');
a.innerHTML = 'A';
let b = document.createElement('div');
b.innerHTML = 'B';
document.body.append(a);
a.append(b);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

let a = document.createElement('div');
a.innerHTML = 'UK';
let b = document.createElement('div');
b.innerHTML = 'England';
let c = document.createElement('div');
c.innerHTML = 'Scotland';
document.body.append(a);
a.append(b);
a.append(c);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

4) England and Scotland, England contains London

Input

let a = document.createElement('div'); a.innerHTML = 'A'; let b = document.createElement('div'); b.innerHTML = 'B'; document.body.append(a); a.append(b); let css = document.createElement('style'); document.head.append(css); css.innerText = ` div{ border:solid; padding: 1ex; margin: 1ex; } `;

xxxxxxxxxx

 

1

let a = document.createElement('div');

2

a.innerHTML = 'A';

3

let b = document.createElement('div');

4

b.innerHTML = 'B';

5

document.body.append(a);

6

a.append(b);

7

​

8

​

9

let css = document.createElement('style');

10

document.head.append(css);

11

css.innerText = `

12

div{

13

  border:solid;

14

  padding: 1ex;

15

  margin: 1ex;

16

}

17

`;

Go reset

Output

let a = document.createElement('div');
a.innerHTML = 'A';
let b = document.createElement('div');
b.innerHTML = 'B';
document.body.append(a);
a.append(b);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

let a = document.createElement('div');
a.innerHTML = 'England';
let b = document.createElement('div');
b.innerHTML = 'Scotland';
let c = document.createElement('div');
c.innerHTML = 'London';
document.body.append(a);
document.body.append(b);
a.append(c);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

5) UK contains England and Scotland, Scotland contains Edinburgh

Input

let a = document.createElement('div'); a.innerHTML = 'A'; let b = document.createElement('div'); b.innerHTML = 'B'; document.body.append(a); a.append(b); let css = document.createElement('style'); document.head.append(css); css.innerText = ` div{ border:solid; padding: 1ex; margin: 1ex; } `;

xxxxxxxxxx

 

1

let a = document.createElement('div');

2

a.innerHTML = 'A';

3

let b = document.createElement('div');

4

b.innerHTML = 'B';

5

document.body.append(a);

6

a.append(b);

7

​

8

​

9

let css = document.createElement('style');

10

document.head.append(css);

11

css.innerText = `

12

div{

13

  border:solid;

14

  padding: 1ex;

15

  margin: 1ex;

16

}

17

`;

Go reset

Output

let a = document.createElement('div');
a.innerHTML = 'A';
let b = document.createElement('div');
b.innerHTML = 'B';
document.body.append(a);
a.append(b);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

let uk = document.createElement('div');
let en = document.createElement('div');
let sc = document.createElement('div');
let ed = document.createElement('div');
uk.innerHTML = 'UK';
en.innerHTML = 'England';
sc.innerHTML = 'Scotland';
ed.innerHTML = 'Edinburgh';
document.body.append(uk);
uk.append(en);
uk.append(sc);
sc.append(ed);


let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
`;

6) Create a drop down list

A dropdown list is a select element that contains option elements.

<select>
  <option>England</option>
  <option>Northern Ireland</option>
  <option>Scotland</option>
  <option>Wales</option>
</select>

Input

let select = document.createElement('select'); document.body.append(select); let option = document.createElement('option'); option.innerHTML = 'A'; select.append(option); let option2 = document.createElement('option'); option2.innerHTML = 'B'; select.append(option2);

xxxxxxxxxx

 

1

let select = document.createElement('select');

2

document.body.append(select);

3

let option = document.createElement('option');

4

option.innerHTML = 'A';

5

select.append(option);

6

let option2 = document.createElement('option');

7

option2.innerHTML = 'B';

8

select.append(option2);

9

​

Go reset

Output

let select = document.createElement('select');
document.body.append(select);
let option = document.createElement('option');
option.innerHTML = 'A';
select.append(option);
let option2 = document.createElement('option');
option2.innerHTML = 'B';
select.append(option2);

let select = document.createElement('select');
document.body.append(select);
for (let c of ['England','Northern Ireland','Scotland','Wales']){
  let option = document.createElement('option');
  option.innerHTML = c;
  select.append(option);
}

7) Create a drop down from a list

A dropdown list is a select element that contains option elements.

Input

const countries = ["France", "Germany", "Italy", "Spain"]; let select = document.createElement('select'); document.body.append(select); for(let c of countries){ let option = document.createElement("option"); // Remember there are three steps to complete }

xxxxxxxxxx

 

1

const countries = ["France", "Germany", "Italy", "Spain"];

2

let select = document.createElement('select');

3

document.body.append(select);

4

for(let c of countries){

5

  let option = document.createElement("option");

6

  // Remember there are three steps to complete

7

}

8

​

Go reset

Output

const countries = ["France", "Germany", "Italy", "Spain"];
let select = document.createElement('select');
document.body.append(select);
for(let c of countries){
  let option = document.createElement("option");
  // Remember there are three steps to complete
}

const countries = ["France", "Germany", "Italy", "Spain"];
let select = document.createElement('select');
document.body.append(select);
for (let c of countries){
  let option = document.createElement('option');
  option.innerHTML = c;
  select.append(option);
}