DOM div in div: Difference between revisions
		
		
		
		Jump to navigation
		Jump to search
		
Tag: Manual revert  | 
				|||
| Line 190: | Line 190: | ||
}  | }  | ||
`;</pre>  | `;</pre>  | ||
<pre class='ans'>  | |||
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;  | |||
}  | |||
`;</pre>  | |||
</div>  | |||
==Create a drop down list==  | |||
<div class='qu'>  | |||
<pre class='usr'>  | |||
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);  | |||
;</pre>  | |||
<pre class='ans'>  | <pre class='ans'>  | ||
let uk = document.createElement('div');  | let uk = document.createElement('div');  | ||
Revision as of 19:08, 14 August 2022

UK contains England
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;
}
`;
UK contains England, England contains London
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;
}
`;
UK contains England and Scotland
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;
}
`;
England and Scotland, England contains London
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;
}
`;
UK contains England and Scotland, Scotland contains Edinburgh
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;
}
`;
Create a drop down list
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 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;
}
`;