文章目录
- 一、修改元素内容
- 1、innerText 属性修改元素文本内容
- 2、innerHTML 属性修改元素 HTML 内容
- 3、页面加载后自动执行修改元素内容的 JS 脚本
JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ;
一、修改元素内容
DOM 提供了如下两种方法 , 可以修改元素内容 ;
- innerText 属性 ;
- innerHTML 属性 ;
1、innerText 属性修改元素文本内容
通过 元素对象的 innerText 属性 修改元素内容 :
元素对象的 innerText 属性可以 获取 或 设置 元素内的 文本内容 ,
- 使用该属性时 , 会 获取 元素的 当前文本内容 ;
- 设置该属性时 , 会 替换 元素的 当前文本内容 ;
- 注意 : 使用该属性 , 会自动删除 HTML 标签 , 也就是说如果有 空格 或 换行 , 会被删除 ;
代码示例 :
document.getElementById("elementId").innerText = "新文本内容";完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
</head>
<body>
<div id="hello">点击下方按钮 , 改变元素内容</div>
<button id="button">修改元素内容</button>
<script>
// 注意 : HTML 文档加载顺序是从上到下加载
// 这里要先加载标签 , 然后加载 JavaScript 脚本
// 1. 获取事件源
// 使用的是 标签选择器
var button = document.querySelector('button');
var div = document.querySelector('div');
// 2. 绑定事件
// 要绑定的是事件源 button 的 onclick 点击事件
// button.onclick 就是要绑定的事件
// 3. 添加事件处理程序
button.onclick = function() {
div.innerText = "已点击 , 使用 innerText 修改元素文本内容"
}
</script>
</body>
</html>执行结果 :
2、innerHTML 属性修改元素 HTML 内容
通过 元素对象的 innerHTML 属性 修改元素内容 :
元素对象的 innerHTML 属性可以 获取或设置元素内部的 HTML 标签元素 , 设置这个属性时 , 实际上是在替换元素内部的 HTML 结构 ;
- 使用该属性时 , 会 获取 元素的 当前文本的 HTML 内容 ;
- 设置该属性时 , 会 替换 元素的 当前文本的 HTML 内容 ;
- 注意 : 使用该属性 , 会自带 HTML 标签 , 也就是说如果有 空格 或 换行 会保留下来 ;
代码示例 :
document.getElementById("elementId").innerHTML = "<p>新的HTML内容</p></br>";完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
</head>
<body>
<div id="hello">点击下方按钮 , 改变元素内容</div>
<button id="button">修改元素内容</button>
<script>
// 注意 : HTML 文档加载顺序是从上到下加载
// 这里要先加载标签 , 然后加载 JavaScript 脚本
// 1. 获取事件源
// 使用的是 标签选择器
var button = document.querySelector('button');
var div = document.querySelector('div');
// 2. 绑定事件
// 要绑定的是事件源 button 的 onclick 点击事件
// button.onclick 就是要绑定的事件
// 3. 添加事件处理程序
button.onclick = function() {
div.innerHTML = "<p>已点击</p> 使用 innerHTML 属性</br>修改元素文本内容"
}
</script>
</body>
</html>执行结果 :
执行后的效果如下 : 使用 <p></p> 标签的段落效果 , 使用 </br> 标签的换行效果 , 都设置到了元素内容中 ;
3、页面加载后自动执行修改元素内容的 JS 脚本
上面的代码 , 都是 先获取按钮元素 , 然后为 按钮元素绑定点击事件 , 点击 按钮后 修改元素内容 ;
也可以不绑定点击事件 , 直接在 JavaScript 脚本中修改元素内容 ; 参考如下代码 :
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
</head>
<body>
<div id="hello">点击下方按钮 , 改变元素内容</div>
<button id="button">修改元素内容</button>
<script>
// 注意 : HTML 文档加载顺序是从上到下加载
// 这里要先加载标签 , 然后加载 JavaScript 脚本
// 页面加载后 , 会自动执行该 JavaScript 脚本
var div = document.querySelector('div');
// 该脚本会自动执行
div.innerHTML = "<p>已点击</p> 使用 innerHTML 属性</br>修改元素文本内容"
</script>
</body>
</html>执行结果 :
