DOM div in div

1) A contains B

Input

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; } `;

xxxxxxxxxx

 

1

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

2

a.innerHTML = 'UK';

3

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

4

b.innerHTML = 'England';

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 = '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;
}
`;

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) A contains B, B contains C

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) A contains B and C

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) A and B, A contains C

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 = 'A';
let b = document.createElement('div');
b.innerHTML = 'B';
let c = document.createElement('div');
c.innerHTML = 'C';
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) A contains B

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 = '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;
}
`;

6) A contains B

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 = '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;
}
`;