DOM div in div: Difference between revisions
Jump to navigation
Jump to search
Tag: Reverted |
|||
| Line 214: | Line 214: | ||
} | } | ||
`;</pre> | `;</pre> | ||
</div> | |||
==Use ul and and li elements== | |||
<div class='qu'> | |||
<pre class='usr'> | |||
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); | |||
</pre> | |||
<pre class='ans'> | |||
let uk = document.createElement('ul'); | |||
let enli = document.createElement('li'); | |||
let scli = document.createElement('li'); | |||
let scul = document.createElement('ul'); | |||
let ed = document.createElement('li'); | |||
uk.innerHTML = 'UK'; | |||
enli.innerHTML = 'England'; | |||
scli.innerHTML = 'Scotland'; | |||
ed.innerHTML = 'Edinburgh'; | |||
document.body.append(uk); | |||
uk.append(enli); | |||
uk.append(scli); | |||
sc.append(ed); | |||
</pre> | |||
</div> | </div> | ||
Revision as of 07:50, 12 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;
}
`;
Use ul and and li elements
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);
let uk = document.createElement('ul');
let enli = document.createElement('li');
let scli = document.createElement('li');
let scul = document.createElement('ul');
let ed = document.createElement('li');
uk.innerHTML = 'UK';
enli.innerHTML = 'England';
scli.innerHTML = 'Scotland';
ed.innerHTML = 'Edinburgh';
document.body.append(uk);
uk.append(enli);
uk.append(scli);
sc.append(ed);