Enlace original de este artículo: https://blog.csdn.net/xzk9381/article/details/111881205
1. Establecer o devolver el contenido html del elemento.
Utilice $('DOM').html()un método para establecer o devolver el contenido html del elemento:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').html("测试完成");
console.log($('#mydiv').html())
})
</script>
</head>
<body>
<div id="mydiv">测试</div>
</body>
</html>
En el código anterior, si hay elementos secundarios en mydiv, el elemento secundario completo se devolverá como una cadena.
$('DOM').html() También puede pasar una función y usar el valor de retorno de la función como el contenido del html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').html(x=>10);
console.log($('#mydiv').html());
$('#mydiv').html(function (){
return 20;
});
console.log($('#mydiv').html())
})
</script>
</head>
<body>
<div id="mydiv">测试</div>
</body>
</html>
También puede agregar elementos secundarios directamente al elemento usando este método:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').html("<div id='mydiv2'>测试2</div>");
console.log($('#mydiv').html())
})
</script>
</head>
<body>
<div id="mydiv">测试</div>
</body>
</html>
Enlace original de este artículo: https://blog.csdn.net/xzk9381/article/details/111881205
Dos, puede establecer o devolver el contenido de texto del elemento
Se $('DOM').text()puede proporcionar contenido de texto de uso o elemento de retorno, el método HTML () tiene los siguientes puntos diferentes:
- Si el elemento contiene elementos secundarios, el método text () no devolverá la etiqueta del elemento secundario, sino solo el contenido del elemento secundario; html () devolverá la etiqueta y el contenido
- Si hay espacios en el contenido del elemento, el método text () y el método html () reservarán los espacios, pero el método nativo innerText no reservará los espacios.
- El método text () no puede agregar contenido de elementos secundarios al elemento
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').text(' 测试完成'); // 使用 text 方法设置一个带有空格的内容
console.log($('#mydiv').text()); // 可以打印内容（带有空格）
console.log(mydiv.innerText); // 使用原生的方法打印不带空格
console.log($('#mydiv').text() == $('#mydiv').html()) // 两个方法获取的值是相等的
$('#mydiv').html($('#mydiv').text() + '<div> 测试2</div>') // 使用 html 方法向其中添加子标签
console.log($('#mydiv').text() == $('#mydiv').html()) // 这样两个方法获取到的值是不相等的
})
</script>
</head>
<body>
<div id="mydiv">
测试
</div>
</body>
</html>
Enlace original de este artículo: https://blog.csdn.net/xzk9381/article/details/111881205