El objeto DOM DList se utiliza para representar la etiqueta HTML <dl> . Se accede al elemento Dlist mediante getElementById() .
Sintaxis:
document.getElementById("ID");<
Donde “id” es el ID asignado a la etiqueta “dl” .
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DList Object</title>
<style>
h1,
h2 {
text-align: center;
}
h1 {
color: green;
}
dl {
margin-left: 20%;
}
button {
margin-left: 30%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM DList Object</h2>
<!-- Assigning id to 'dl' tag -->
<dl id="GFG">
<dt>GeeksforGeeks</dt>
<dd>A Computer Science Portal For Geeks</dd>
</dl>
<button onclick="myGeeks()">Submit</button>
<p id="sudo"></p>
<script>
function myGeeks() {
<!-- Accessing 'dl'. -->
var g = document.getElementById("GFG").innerHTML;
document.getElementById("sudo").innerHTML = g;
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: el objeto DList se puede crear utilizando el método document.createElement .
html
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DList Object </title>
<style>
h1,
h2 {
text-align: center;
}
h1 {
color: green;
}
dl {
margin-left: 20%;
}
button {
margin-left: 30%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM DList Object</h2>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
var g = document.createElement("DL");
g.setAttribute("id", "GFG");
document.body.appendChild(g);
var f = document.createElement("DT");
var text = document.createTextNode("GeeksForGeeks");
f.appendChild(text);
document.getElementById("GFG").appendChild(f);
var z = document.createElement("DD");
var text2 = document.createTextNode(
"A Computer Science PortaL For Geeks");
z.appendChild(text2);
document.getElementById("GFG").appendChild(z);
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con DOM DList Object se enumeran a continuación.
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA