RECUPERAR DATOS DE DIVERSAS ETIQUETAS
Para recuperar los distintos valores o textos se usan distintas funciones de jquery o
javascript
- texto de etiqueta (div por ej.) var xxx = $(selector).text()
- atributo de etiqueta (div por ej.) var xxx = $(selector).attr("nombre atributo") ej. "src", "alt" etc.
- valor o texto de input text var xxx = $(selector).val()
- valor de select var xxx = $(selector).val()
- texto de select var xxx = $(selector :selected).text();
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("#copiar").click(function() {
var nombre = $("#nombre").text();
var fecha = $("#fechas").val();
var valcolores1 = $("#colores").val();
var colores1 = $("#colores :selected").text();
var mensaje = $("#mensaje").val();
$("#copia").empty(); //borra el contenido de copia.
$("#copia").append("contenido div: " + nombre + '<br />'); //append agrega los valores recuperados.
$("#copia").append("valor input: " + fecha + '<br />');
$("#copia").append("valor selector: " + valcolores1 + '<br />');
$("#copia").append("texto selector: " + colores1 + '<br />');
$("#copia").append("texto textarea: " + mensaje + '<br />');
});
});
</script>
<style>
.bloque1{
text-align: left;
margin-top:50px;
}
#copia{
margin-top:50px;
border: #000 1px solid;
width:200px;
height:100px;
}
</style>
</head>
<body>
<div class="bloque1">
<span id="nombre" style="width:100px;">HOLA</span>
<span style="padding-left:20px;">Contenido de "span" id=nombre</span>
</div>
<div class="bloque1">
<input type="text" id="fechas" style="width:100px;"/></span>
<span style="padding-left:100px;">Contenido de "input" id=fecha (puede cambiarse)</span>
</div>
<div class="bloque1">
<select id="colores" style="width:100px;">
<option value="bla"> blanco</option>
<option value="neg"> negro</option>
<option value="roj" > rojo</option>
</select>
<span style="padding-left:100px;">Contenido de selector id=fecha (puede cambiarse)</span>
</div>
<div class="bloque1">
<textarea id="mensaje" style="width:100px;"></textarea>
<span style="padding-left:100px;">Contenido de "textarea" id=mensaje (puede cambiarse)</span>
</div>
<div class="bloque1">
<input type="button" id="copiar" value="COPIAR" style="width:100px;"/>
</div>
<div id="copia"></div>
</body>