DOM div in div - Revision history

Andr3w: /* Create a drop down from a list */

2023-06-07T13:11:35Z

Create a drop down from a list

← Older revision		Revision as of 13:11, 7 June 2023
Line 257:		Line 257:
	document.body.append(select);		document.body.append(select);
	for(let c of countries){		for(let c of countries){
	let s = document.createElement("~~select~~");		let option = document.createElement("option");
	// Remember there are three steps to complete		// Remember there are three steps to complete
	}		}

2023-06-07T13:10:43Z

Create a drop down from a list

← Older revision		Revision as of 13:10, 7 June 2023
Line 253:		Line 253:
	<div class='qu'>		<div class='qu'>
	<pre class='usr'>		<pre class='usr'>
	const countries = ["France", "Germany", "Italy", "Spain"]		const countries = ["France", "Germany", "Italy", "Spain"];
	let select = document.createElement('select');		let select = document.createElement('select');
	document.body.append(select);		document.body.append(select);
Line 262:		Line 262:
	</pre>		</pre>
	<pre class='ans'>		<pre class='ans'>
	const countries = ["France", "Germany", "Italy", "Spain"]		const countries = ["France", "Germany", "Italy", "Spain"];
	let select = document.createElement('select');		let select = document.createElement('select');
	document.body.append(select);		document.body.append(select);

2023-06-07T13:10:00Z

Create a drop down from a list

← Older revision		Revision as of 13:10, 7 June 2023
Line 253:		Line 253:
	<div class='qu'>		<div class='qu'>
	<pre class='usr'>		<pre class='usr'>
	const countries = ["France", "~~Germamny~~", "Italy", "Spain"]		const countries = ["France", "Germany", "Italy", "Spain"]
	let select = document.createElement('select');		let select = document.createElement('select');
	document.body.append(select);		document.body.append(select);
Line 262:		Line 262:
	</pre>		</pre>
	<pre class='ans'>		<pre class='ans'>
	const countries = ["France", "~~Germamny~~", "Italy", "Spain"]		const countries = ["France", "Germany", "Italy", "Spain"]
	let select = document.createElement('select');		let select = document.createElement('select');
	document.body.append(select);		document.body.append(select);

2023-06-07T13:09:45Z

Create a drop down from a list

← Older revision		Revision as of 13:09, 7 June 2023
Line 251:		Line 251:
	A dropdown list is a select element that contains option elements.		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>~~
	<div class='qu'>		<div class='qu'>
	<pre class='usr'>		<pre class='usr'>

2023-06-07T13:09:32Z

Create a drop down list

@@ Line 240: / Line 240: @@
 document.body.append(select);
 for (let c of ['England','Northern Ireland','Scotland','Wales']){
    let option = document.createElement('option');
    option.innerHTML = c;

2022-08-14T19:13:39Z

Create a drop down list

← Older revision		Revision as of 19:13, 14 August 2022
Line 217:		Line 217:

	==Create a drop down list==		==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>
	<div class='qu'>		<div class='qu'>
	<pre class='usr'>		<pre class='usr'>

2022-08-14T19:11:25Z

Create a drop down list

← Older revision		Revision as of 19:11, 14 August 2022
Line 231:		Line 231:
	let select = document.createElement('select');		let select = document.createElement('select');
	document.body.append(select);		document.body.append(select);
	for (let c in ['England','Northern Ireland','Scotland','Wales']){		for (let c of ['England','Northern Ireland','Scotland','Wales']){
	let option = document.createElement('option');		let option = document.createElement('option');
	option.innerHTML = c;		option.innerHTML = c;

2022-08-14T19:11:11Z

Create a drop down list

← Older revision		Revision as of 19:11, 14 August 2022
Line 227:		Line 227:
	option2.innerHTML = 'B';		option2.innerHTML = 'B';
	select.append(option2);		select.append(option2);
	;</pre>		</pre>
	<pre class='ans'>		<pre class='ans'>
	let uk = document.createElement('~~div~~');		let select = document.createElement('select');
	~~let en =~~ document.~~createElement~~(~~'div'~~);		document.body.append(select);
	~~let sc = document.createElement~~(~~'div');~~		for (let c in ['England','Northern Ireland','Scotland','Wales']){
	let ~~ed = document.createElement(~~'~~div');~~		let option = document.createElement('option');
	~~uk.innerHTML =~~ 'UK';		option.innerHTML = c;
	~~en.innerHTML =~~ '~~England';~~		select.append(option);
	~~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>		</pre>
	</div>		</div>

2022-08-14T19:08:03Z

UK contains England and Scotland, Scotland contains Edinburgh

@@ Line 190: / Line 190: @@
+}
 `;</pre>
 <pre class='ans'>
 let uk = document.createElement('div');

2022-08-12T07:53:34Z

Use ul and and li elements

@@ Line 214: / Line 214: @@
+}
 `;</pre>
 </div>