DOM div in div: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
← Older editNewer edit →
Line 128: Line 128:
</div>
</div>


==A contains B==
==A and B, A contains C==
<div class='qu'>
<div class='qu'>
<pre class='usr'>
<pre class='usr'>
Line 153: Line 153:
let b = document.createElement('div');
let b = document.createElement('div');
b.innerHTML = 'B';
b.innerHTML = 'B';
let c = document.createElement('div');
c.innerHTML = 'C';
document.body.append(a);
document.body.append(a);
a.append(b);
document.body.append(b);
a.append(c);




Line 167: Line 170:
`;</pre>
`;</pre>
</div>
</div>


==A contains B==
==A contains B==

Revision as of 06:15, 11 September 2021





1) A contains B




Input

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









2) A contains B, B contains C




Input

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

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

 
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

 
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

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


Served by: basil at 2025-05-30T14:30

Retrieved from "https://progzoo.net/index.php?title=DOM_div_in_div&oldid=683"

		
	






	
Navigation menu