JavaScript利用函数设置和修改div盒子的innerHtml和innerText属性-----JavaScript

已于 2023-11-10 14:43:57 修改
阅读量940 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript react.js node.js 前端 vue.js js angular.js
于 2023-11-07 16:13:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134270001
版权 
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
	<head>
		<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>HtmlAll</title>
		<style type="text/css">
			#div1{
				background-color: aquamarine;
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="j.js"></script>
		<table align="center">
			<form id="myForm">
				<tr><td>登录窗口</td></tr>
				<tr>
					<td>
						<input type="text" id="username"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" id="password"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="登录"/>
					</td>
				</tr>
			</form>
		</table>
		<!-- void运算符的语法是,执行运算符,但不返回任何结果 -->
		<!-- 让我们href的路径消失,用void不返回即可 -->
		<!-- javascript:void(0)我们的javascript是用来提示浏览器的,这是一段JS代码,这是不能省略的 -->
		<a href="javascript:void(0)" onclick="alert('test')">执行页面不跳转</a>
		<input type="button" onclick="vars()" value="123" />
		<input type="button" id="auto" value="auto" />
		<input type="button" id="tyo" value="tyo" />
		<input type="button" value="设置div的内容" id="btnm"/>
		<div id="div1"></div>
	</body>
</html>

<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
    <head>
        <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HtmlAll</title>
        <style type="text/css">
            #div1{
                background-color: aquamarine;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                position: relative;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="j.js"></script>
        <table align="center">
            <form id="myForm">
                <tr><td>登录窗口</td></tr>
                <tr>
                    <td>
                        <input type="text" id="username"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="password" id="password"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="登录"/>
                    </td>
                </tr>
            </form>
        </table>
        <!-- void运算符的语法是,执行运算符,但不返回任何结果 -->
        <!-- 让我们href的路径消失,用void不返回即可 -->
        <!-- javascript:void(0)我们的javascript是用来提示浏览器的,这是一段JS代码,这是不能省略的 -->
        <a href="javascript:void(0)" οnclick="alert('test')">执行页面不跳转</a>
        <input type="button" οnclick="vars()" value="123" />
        <input type="button" id="auto" value="auto" />
        <input type="button" id="tyo" value="tyo" />
        <input type="button" value="设置div的内容" id="btnm"/>
        <div id="div1"></div>
    </body>
</html>

window.onload = function()
{
	document.getElementById("btnm").onclick = function()
	{
		//设置div的内容
		var divElt = document.getElementById("div1");
		//innerHtml和innerText不是代码,是属性,和我们设置text的value原理相同
		//innerHtml会把后面的字符串视为html代码,innerText视为字符串
		divElt.innerHTML = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
		divElt.innerText = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
	}
	document.getElementById("password").onkeydown = function(event,b)//局部变量
	{
		//获取键值
		//回车键键值是13,ESC是27
		//对于键盘事件来说,他都有keyCode属性用来获取键值
		if(event.keyCode === 13)
		{
			//识别到回车键位提示正在登录
			alert("正在登录")
		}
	}
	
	document.getElementById("myForm").onsubmit = function()
	{
		alert("正在登录")
	}
	
	document.getElementById("auto").onclick = function()
	{
		var ui = [false,true,1,2,"abc",3.14];
		for(var i = 0; i < ui.length; i++)
		{
			alert(ui[i]);
		}
		for(var i in ui)
		{
			//这个var i不是数组的元素,而是数组的下标
			alert(i);//显示都是下标的index
			alert(ui[i]);
		}
	}
	document.getElementById("tyo").onclick = function()
	{
		User = function(username,password)
		{
			this.username = username;
			this.password = password;
		}
		var u = new User("张三","12345");
		alert(u["username"] + "," + u["password"]);
		//这个用在数组上是角标index,用在对象上,是对象的属性名,返回字符串
		for(var value in u)
		{
			//属性名是一个字符串
			alert(value);
			//本身就是一个字符串,直接放进去即可
			alert(u[value]);
		}
		with(u)
		{
			//这种方式仅作了解,不要用尽量,不能所见即所得
			alert(username + "," + password);
		}
	}
}

function vars()
{
	alert("1");
}

window.onload = function()
{
    document.getElementById("btnm").onclick = function()
    {
        //设置div的内容
        var divElt = document.getElementById("div1");
        //innerHtml和innerText不是代码,是属性,和我们设置text的value原理相同
        //innerHtml会把后面的字符串视为html代码,innerText视为字符串
        divElt.innerHTML = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
        divElt.innerText = "<font color='red'>哈哈哈哈哈哈哈哈哈</font>";
    }
    document.getElementById("password").onkeydown = function(event,b)//局部变量
    {
        //获取键值
        //回车键键值是13,ESC是27
        //对于键盘事件来说,他都有keyCode属性用来获取键值
        if(event.keyCode === 13)
        {
            //识别到回车键位提示正在登录
            alert("正在登录")
        }
    }
    
    document.getElementById("myForm").onsubmit = function()
    {
        alert("正在登录")
    }
    
    document.getElementById("auto").onclick = function()
    {
        var ui = [false,true,1,2,"abc",3.14];
        for(var i = 0; i < ui.length; i++)
        {
            alert(ui[i]);
        }
        for(var i in ui)
        {
            //这个var i不是数组的元素,而是数组的下标
            alert(i);//显示都是下标的index
            alert(ui[i]);
        }
    }
    document.getElementById("tyo").onclick = function()
    {
        User = function(username,password)
        {
            this.username = username;
            this.password = password;
        }
        var u = new User("张三","12345");
        alert(u["username"] + "," + u["password"]);
        //这个用在数组上是角标index,用在对象上,是对象的属性名,返回字符串
        for(var value in u)
        {
            //属性名是一个字符串
            alert(value);
            //本身就是一个字符串,直接放进去即可
            alert(u[value]);
        }
        with(u)
        {
            //这种方式仅作了解,不要用尽量,不能所见即所得
            alert(username + "," + password);
        }
    }
}

function vars()
{
    alert("1");
}

旧约Alatus
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js更改标签内容 innerHTML innerText
猿码互联
05-20 364
属性用于获取或设置HTML元素的内容，包括标签和标签内的文本。属性用于获取或设置元素的纯文本内容，不包含任何HTML标签。标签的内容将被替换为"New Content"。属性，只能更改元素内部的文本内容，而不影响标签。标签内的文本将被替换为"New Text"，但是。执行上述JavaScript代码后，执行上述JavaScript代码后，在JavaScript中，可以使用。属性，可以替换整个元素的内容。属性在IE浏览器中不支持，而。属性来更改标签的内容。标签内的文本，可以使用。标签本身不会被替换。
innertext和outertext以及div
12-10
innertext和outertext以及div,在编写网页时经常用到的,很好用.
HTML innerHTML属性用法及分析
L_AMiao的博客
10-14 1937
innerHTML：设置或返回表格行的开始和结束标签之间的 HTML。                      看它的英文单词也可以明白就是里面的字符按html标记的语言格式取出来或重新设置。 innerHTML属性w3c标准不支持的，但是各大浏览器支持它的实现。 innerHTML的用法 举例： &lt;div id="div1"&gt;&lt;/div&gt; 下面是js: var...
JavaScript中的innerHTML使用
热门推荐
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
js的innerHTML进行页面修改
qq_47959958的博客
03-10 1723
对于野路子出家的前端，今天算是开了眼。原来还有这种玩法—— 首先是html的body部分 <body> <script type="text/javascript" src="header.js "></script> <div> 这里是页面主体内容 <script type="text/javascript" src="${base}js/header.js "></script> </div&g
innerHTML 是什么用法
m0_57236802的博客
08-14 1436
innerHTML属性用于获取或设置HTML元素的内部HTML内容。你可以通过这个属性来插入新的HTML内容或获取现有内容。
Typing_Speed_Test:在HTML，CSS和JavaScript中完成打字速度测试
05-10
5. 更新计分板：将计算结果用`innerHTML`属性写回对应元素。 例如，一个简单的JavaScript实现可能如下： ```javascript let startTime = null; let originalText = "示例文本"; let typedText = ""; let error...
My2JavaScript-DOM-Tutorial
03-20
- DOM结构：包括元素节点、属性节点、文本节点等，每个节点都可以被JavaScript访问和修改。 2. **DOM元素操作**： - `getElementById()`: 通过ID查找特定元素。 - `getElementsByTagName()`, `...
JAVASCRIPT-DOCUMENT方法大全.pdf
09-30
6. `document.body`: 访问`<body>`元素，可以设置其样式和属性，如`document.body.bgColor`、`document.body.link`等。 7. `document.body.innerText`和`innerHTML`: 分别用于设置或获取`<body>`内的纯文本和HTML...
javascript经典特效---最简单时间显示.rar
03-08
时间显示通常会插入到HTML元素中，比如`<div>`或`<span>`，通过JavaScript的DOM操作（如`document.getElementById`或`document.querySelector`找到元素，然后用`innerHTML`或`innerText`属性更改内容）。 7. **事件...
JavaScript-DOM
03-09
3. **DOM属性和方法**：了解如何访问和修改元素的属性，如`innerHTML`、`innerText`、`style`对象等。`innerHTML`可以获取或设置元素的所有子节点的HTML，而`style`对象允许我们动态改变元素的样式。 4. **事件处理...
js innerHTML 改变div内容的方法
10-27
永远不知道你可以改变的内容，一个HTML元素？也许你要取代的文字段落中，以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。
JavaScript之innerHTML和outerHTML，innerText和outerText
最新发布
Karka_的博客
09-15 4158
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
JavaScript修改HTML的内容
weixin_59246157的博客
03-24 1320
/ document.querySelector(".myText").innerText = "新的文本内容";document.getElementById("myText").innerHTML = "新的文本内容";document.querySelector(".myText").innerHTML = "新的文本内容";// elements[i].innerText = "新的文本内容";// elements[i].innerText = "新的文本内容";
如何让form中的onsubmit 通过一个按钮触发 js_构建一个即时消息应用（八）：Home 页面 | Linux 中国...
weixin_39724793的博客
12-04 104
让我们在本文中完成 home 页面的开发。来源：https://linux.cn/article-12722-1.html作者：Nicolás Parada译者：XianLei Gao（本文字数：5448，阅读时长大约：6 分钟）本文是该系列的第八篇。第一篇: 模式第二篇: OAuth第三篇: 对话第四篇: 消息第五篇: 实时消息第六篇: 仅用于开发的登录第七篇: Access 页面继续前端部分，...
08JS操作DIV样式
Blog of Lytracy
09-07 2358
1、操作步骤 先创建⼀个div获取到div元素，然后对其进⾏操作 创建div 和操作按钮 获取div和按钮 给按钮添加点击事件 操作div样式 2、示例 实现⼀个“⿏标移⼊，div背景颜⾊变成红⾊，⿏标移出，背景颜⾊变回⽩⾊”的效果。 第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件 ⿏标移⼊事件 `onmouseover` ⿏标移出事件 `onmouseout` 第⼆步：我们要找到需要改变的div元素 我们通过`id`就可以找到我们要改变的`div` 第三步：我们要对修
JS中的innerHTML，innerText，value的区别
gabby____的博客
09-08 3万+
一、区别 innerHTML 在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。 innerTEXT 打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。 value 显示双引号中的全部内容，显示标签，标签无效。 二、举例 例一 1、innerHTML &lt;!doctype html&gt; &lt;html lan...
js改变html文本的方法,javascript怎么改变文本内容
weixin_36094492的博客
06-14 6947
javascript改变文本内容的方法：首先使用“document.getElementById("元素id值")”语句获取到元素对象；然后使用innerHTML属性来改变文本内容，语法格式“元素对象.innerHTML=text;”。本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。JavaScript改变html网页的文本内容JavaScript能改变...
jquery中 html() text() val() innerText总结
jacky_zh的专栏
12-04 2万+
首先把总重要的总结下来 jQuery封装的方法html,text,val .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 一看黑体的部分，所以把text和html分为一组，他们都是对元素取值或设置，只有val是对表单元素的。 他们的共同点： html和val 都是读取时，
利用HTML、CSS、JavaScript写一个可以跳转年月的万年历页面
04-27
好的，下面是一个简单的万年历页面的代码，可以根据用户的选择跳转到不同年月的日历。 HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>万年历</title> <style type="text/css"> .calendar { margin: 0 auto; width: 600px; height: 600px; border: 1px solid black; font-size: 18px; text-align: center; } .calendar table { border-collapse: collapse; margin: 0 auto; width: 100%; height: 100%; table-layout: fixed; } .calendar th, .calendar td { border: 1px solid black; width: 14.28%; height: 14.28%; } .calendar .today { background-color: #ffcccc; } </style> </head> <body> <div class="calendar"> <h1>万年历</h1> <form> <label for="year">年份：</label> <input type="number" id="year" name="year" min="1900" max="2100" value="2021"> <label for="month">月份：</label> <select id="month" name="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7">7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option> </select> <input type="button" value="跳转" onclick="jump()"> </form> <table> <thead> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead> <tbody id="calendar-body"> </tbody> </table> </div> <script type="text/javascript"> function jump() { var year = document.getElementById("year").value; var month = document.getElementById("month").value; if (year && month) { var date = new Date(year, month - 1, 1); drawCalendar(date); } } function drawCalendar(date) { var year = date.getFullYear(); var month = date.getMonth() + 1; var firstDay = new Date(year, month - 1, 1); var lastDay = new Date(year, month, 0); var startDate = new Date(firstDay); startDate.setDate(startDate.getDate() - firstDay.getDay()); var endDate = new Date(lastDay); endDate.setDate(endDate.getDate() + (6 - lastDay.getDay())); var calendarBody = document.getElementById("calendar-body"); calendarBody.innerHTML = ""; for (var d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) { var tr = document.createElement("tr"); for (var i = 0; i < 7; i++) { var td = document.createElement("td"); if (d.getMonth() + 1 != month) { td.classList.add("other-month"); } if (d.getDate() == new Date().getDate() && d.getMonth() == new Date().getMonth() && d.getFullYear() == new Date().getFullYear()) { td.classList.add("today"); } td.innerText = d.getDate(); tr.appendChild(td); } calendarBody.appendChild(tr); } } window.onload = function() { var date = new Date(); drawCalendar(date); } </script> </body> </html> ``` 解释一下上面的代码： 1. 使用 HTML、CSS 和 JavaScript 创建一个名为 `calendar` 的 `div` 元素，用于显示万年历。 2. 在 `form` 中添加 `input` 元素和 `select` 元素，用于让用户选择年份和月份，并添加一个 `onclick` 事件，当用户点击“跳转”按钮时，执行 `jump()` 函数。 3. 在 `table` 中创建一个表格，包括表头和表格主体，用于显示每个月的日历。 4. 在 JavaScript 中，定义 `jump()` 函数用于跳转到用户选择的年份和月份，并调用 `drawCalendar()` 函数来绘制日历。 5. 在 `drawCalendar()` 函数中，根据指定的年份和月份计算出该月的第一天和最后一天，以及需要显示的日期范围。然后，通过循环在表格中生成每天的单元格，并对当前日期、非本月日期和节假日等进行不同的样式处理。 这样，一个简单的万年历页面就完成了。用户可以在页面中选择年份和月份，并跳转到指定的日历。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值