El método html() en jQuery se usa para obtener el contenido del primer elemento en el conjunto de elementos coincidentes o se usa para establecer el contenido HTML de cada elemento coincidente. Devuelve el contenido del primer elemento coincidente. Esta función no acepta ningún argumento.
Sintaxis:
$(selector).html();
Enfoque : crearemos un botón con id y estableceremos su valor como get. Luego, escribimos el script jQuery como alerta de un mensaje simple que devuelve el contenido HTML del primer elemento coincidente una vez que el usuario hace clic en el botón «Obtener».
Ejemplo: en este ejemplo, obtenemos el contenido de la etiqueta <div> una vez que el usuario hace clic en el botón que se mostrará mediante el método de alerta.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
alert($("div").html());
});
});
</script>
</head>
<body>
<div>
<p>Get html content from html element</p>
</div>
<button id="get">Get</button>
</body>
</html>
Producción:
Convertir el elemento HTML en un texto:
Planteamiento: Estamos creando un botón con el valor Obtener. Luego escribimos el script jQuery que convierte el contenido del HTML (que es el primer elemento Div) en una string y lo muestra en el elemento de párrafo. Obtenemos el contenido HTML completo del primer elemento Div en este ejemplo.
Ejemplo: en este ejemplo, obtenemos el contenido del elemento div. Tenemos dos etiquetas div y solo se devolverá el contenido del primer elemento coincidente.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
var str = $("div.firstDiv").html();
$("p").text(str);
});
});
</script>
</head>
<body>
<div class="firstDiv">
<div class="secondDiv">
<p>Get html content from html element</p>
</div>
</div>
<button id="get">Get</button>
</body>
</html>
Producción:
Configuración del contenido de HTML:
Sintaxis:
Establece el contenido del elemento emparejado.
$(selector).html(content)
Establece el contenido mediante una función.
$(selector).html(function(index, currentcontent))
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- contenido: Es un parámetro obligatorio que especifica el nuevo contenido para los elementos seleccionados.
- function(index, currentcontent): Es un parámetro opcional que especifica una función que devuelve el nuevo contenido para el elemento seleccionado.
- índice: se utiliza para devolver la posición de índice del elemento en el conjunto.
- currentcontent: Se utiliza para devolver el contenido HTML actual del elemento seleccionado.
Enfoque : estamos creando un botón con el conjunto de valores. Luego escribimos el script jQuery que establece el contenido del primer elemento coincidente, es decir, el primer elemento Div. El código completo de fisrtDiv, es decir, un primer elemento Div se cambiará a «Nuevo contenido HTML y GeeksforGeeks». Tenga en cuenta que estamos usando las etiquetas <h1> y <h2> en el contenido actualizado del HTML.
Ejemplo: En este ejemplo, estamos configurando el contenido del elemento div una vez que el usuario hace clic en el botón Establecer usando la primera sintaxis.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").html(
"<h1>New HTML Content</h1> <h2>GeeksforGeeks</h2>");
});
});
</script>
</head>
<body>
<div class="firstDiv">
<div class="secondDiv">
<p>Set new html content by adding a button</p>
</div>
</div>
<button>Set</button>
</body>
</html>
Producción:
Enfoque : estamos creando un botón con el conjunto de valores. Luego escribimos el script jQuery que establece el contenido del primer elemento coincidente, es decir, el primer elemento Div usando una función. El código completo de fisrtDiv, es decir, un primer elemento Div se cambiará a «El contenido antiguo es: Establecer nuevo contenido HTML agregando un botón con el índice 0 ahora se cambia». La función tiene dos argumentos, es decir, valor de índice y el contenido anterior como una string. Estamos usando estos valores y actualizando el contenido anterior como puede ver en el resultado.
Ejemplo: En este ejemplo, estamos configurando el contenido del primer elemento Div una vez que el usuario hace clic en el botón Establecer. Simplemente estamos devolviendo un mensaje y también imprimiendo el valor del índice recibido.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
.firstDiv {
width: 400px;
border-color: blue;
border-width: 0.2em;
border-style: double;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").html(function (i, str) {
return (
"<h2>Old content is:</h2>" +
str +
"<h2>with index</h2>" +
i +
"<h2>is now changed</h2>"
);
});
});
});
</script>
</head>
<body>
<div class="firstDiv">
<div class="secondDiv">
<h2>
Set new html content
by adding a button
</h2>
</div>
</div>
<br />
<button>Set</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA