Difference between revisions of "DOM div in div"

From ProgZoo
Jump to navigation Jump to search
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody' data-qtp='DOM'></pre>
<pre id='shellbody' data-qtp='DOM'></pre>
==A contains B==
[[Image:UK.png|right|thumb|UK map]]
==UK contains England==
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
let a = document.createElement('div');
let a = document.createElement('div');
a.innerHTML = 'UK';
a.innerHTML = 'A';
let b = document.createElement('div');
let b = document.createElement('div');
b.innerHTML = 'England';
b.innerHTML = 'B';
document.body.append(a);
document.body.append(a);
a.append(b);
a.append(b);
Line 40: Line 41:
</div>
</div>


==A contains B, B contains C==
==UK contains England, England contains London==
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
Line 83: Line 84:
</div>
</div>


==A contains B and C==
==UK contains England and Scotland==
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
Line 126: Line 127:
</div>
</div>


==A and B, A contains C==
==England and Scotland, England contains London==
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
Line 148: Line 149:
<pre class='ans'>
<pre class='ans'>
let a = document.createElement('div');
let a = document.createElement('div');
a.innerHTML = 'A';
a.innerHTML = 'England';
let b = document.createElement('div');
let b = document.createElement('div');
b.innerHTML = 'B';
b.innerHTML = 'Scotland';
let c = document.createElement('div');
let c = document.createElement('div');
c.innerHTML = 'C';
c.innerHTML = 'London';
document.body.append(a);
document.body.append(a);
document.body.append(b);
document.body.append(b);
Line 169: Line 170:
</div>
</div>


==A contains B==
==UK contains England and Scotland, Scotland contains Edinburgh==
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
Line 190: Line 191:
`;</pre>
`;</pre>
<pre class='ans'>
<pre class='ans'>
let a = document.createElement('div');
let uk = document.createElement('div');
a.innerHTML = 'A';
let en = document.createElement('div');
let b = document.createElement('div');
let sc = document.createElement('div');
b.innerHTML = 'B';
let ed = document.createElement('div');
document.body.append(a);
uk.innerHTML = 'UK';
a.append(b);
en.innerHTML = 'England';
sc.innerHTML = 'Scotland';
ed.innerHTML = 'Edinburgh';
document.body.append(uk);
uk.append(en);
uk.append(sc);
sc.append(ed);




Line 209: Line 216:
</div>
</div>


==Create a drop down list==
A dropdown list is a select element that contains option elements.


 
<select>
==A contains B==
  <option>England</option>
  <option>Northern Ireland</option>
  <option>Scotland</option>
  <option>Wales</option>
</select>
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
let a = document.createElement('div');
let select = document.createElement('select');
a.innerHTML = 'A';
document.body.append(select);
let b = document.createElement('div');
let option = document.createElement('option');
b.innerHTML = 'B';
option.innerHTML = 'A';
document.body.append(a);
select.append(option);
a.append(b);
let option2 = document.createElement('option');
option2.innerHTML = 'B';
select.append(option2);
</pre>
<pre class='ans'>
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);
}
</pre>
</div>
 


==Create a drop down from a list==
A dropdown list is a select element that contains option elements.


let css = document.createElement('style');
<div class='qu'>
document.head.append(css);
<pre class='usr'>
css.innerText = `
const countries = ["France", "Germany", "Italy", "Spain"];
div{
let select = document.createElement('select');
   border:solid;
document.body.append(select);
   padding: 1ex;
for(let c of countries){
  margin: 1ex;
   let option = document.createElement("option");
   // Remember there are three steps to complete
}
}
`;</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
let a = document.createElement('div');
const countries = ["France", "Germany", "Italy", "Spain"];
a.innerHTML = 'A';
let select = document.createElement('select');
let b = document.createElement('div');
document.body.append(select);
b.innerHTML = 'B';
for (let c of countries){
document.body.append(a);
  let option = document.createElement('option');
a.append(b);
  option.innerHTML = c;
 
  select.append(option);
 
let css = document.createElement('style');
document.head.append(css);
css.innerText = `
div{
  border:solid;
  padding: 1ex;
  margin: 1ex;
}
}
`;</pre>
</pre>
</div>
</div>

Latest revision as of 13:11, 7 June 2023



  
UK map




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


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>





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










Create a drop down from a list


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





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











Retrieved from ‘https://progzoo.net/index.php?title=DOM_div_in_div&oldid=1093’