JavaScript / jQuery HTML 元素
JavaScript基础 2022-04-25 01:54:55小码哥的IT人生shichen
JavaScript / jQuery HTML 元素
jQuery vs JavaScript
jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。
十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决：
设置文本内容
设置 HTML 元素的内部文本：
jQuery
myElement.text("Hello China!");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>设置文本内容</h1>
<h2 id="01">Hello China!</h2>
<h2 id="02">Hello World!</h2>
<script>
$(document).ready(function() {
var myElement = $("#02");
myElement.text("Hello Shanghai!");
});
</script>
</body>
</html>
运行结果：
设置文本内容 Hello China! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
myElement.textContent = "Hello China!";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>设置文本内容</h1>
<h2 id="01">Hello China!</h2>
<h2 id="02">Hello World!</h2>
<script>
var myElement = document.getElementById("02");
myElement.textContent = "Hello Shanghai!";
</script>
</body>
</html>
运行结果：
设置文本内容 Hello China! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
获取文本内容
获取 HTML 元素的内部文本：
jQuery
var myText = myElement.text();
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>获取文本内容</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElement = $("#03");
var myText = myElement.text();
$("#demo").text(myText);
});
</script>
</body>
</html>
运行结果：
获取文本内容 Hello World! Hello China! Hello Shanghai! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var myText = myElement.textContent || myElement.innerText;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>获取文本内容</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>
<p id="demo"></p>
<script>
var myElement = document.getElementById("03");
var myText = myElement.textContent || myElement.innerText;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html>
运行结果：
获取文本内容 Hello World! Hello China! Hello Shanghai! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
设置 HTML 内容
设置元素的 HTML 内容：
jQuery
var myElement.html("<p>Hello World</p>");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>设置 HTML</h1>
<div id="01">
<h2>Hello China!</h2>
</div>
<div id="02">
<h2>Hello World!</h2>
</div>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElement = $("#02");
myElement.html("<h2>Hello Shanghai!</h2>");
});
</script>
</body>
</html>
运行结果：
设置 HTML Hello China! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var myElement.innerHTML = "<p>Hello World</p>";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>设置 HTML</h1>
<div id="01">
<h2>Hello China!</h2>
</div>
<div id="02">
<h2>Hello World!</h2>
</div>
<p id="demo"></p>
<script>
var myElement = document.getElementById("02");
myElement.innerHTML = "<h2>Hello Shanghai!</h2>";
</script>
</body>
</html>
运行结果：
设置 HTML Hello China! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
获取 HTML 内容
获取元素的 HTML 内容：
jQuery
var content = myElement.html();
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>设置 HTML</h1>
<div id="01">
<h2>Hello China!</h2>
</div>
<div id="02">
<h2>Hello World!</h2>
</div>
<script>
$(document).ready(function() {
var content = $("#01").html();
$("#02").html(content);
});
</script>
</body>
</html>
运行结果：
设置 HTML Hello China! Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var content = myElement.innerHTML;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>设置 HTML</h1>
<div id="01">
<h2>Hello China!</h2>
</div>
<div id="02">
<h2>Hello World!</h2>
</div>
<script>
var content = document.getElementById("01").innerHTML;
document.getElementById("02").innerHTML = content;
</script>
</body>
</html>
运行结果：
设置 HTML Hello China! Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
