javascript中的innerHTML

最新推荐文章于 2023-09-15 14:00:00 发布
最新推荐文章于 2023-09-15 14:00:00 发布
阅读量734 收藏 1
点赞数
分类专栏： js html 文章标签： javascript innerHTML substring document
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allWords/article/details/79169074
版权
html 同时被 2 个专栏收录
8 篇文章 1 订阅
订阅专栏
js
7 篇文章 0 订阅
订阅专栏

需求是这样的

写一个按钮，当点击这个按钮的时候，弹出是第几个按钮，点击最后一个按钮的时候，再后面拼接一个同样的按钮

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#div1{
		width:500px;
		height:400px;
		margin:200px auto;
		box-shadow:0 0 6px #c5c5c5;
	}
  </style>
 </head>
 <body>
	<div id='div1'>
		<p>点击弹框如图</p>
		<p><input οnclick='clickDemo(this)' id='p1' type='button' value='按钮'/></p>		
	<div>
	<script>
		var div1 = document.getElementById('div1');
		var ps = document.getElementsByTagName('input');
		function clickDemo(obj){
			var num = obj.id;
			num = num.substring(1);
			alert("当前是第"+num+"个input标签");
			var pNum = ps.length;
			if(num == pNum){
				var max = pNum+1;
				var str = '<p><input οnclick="clickDemo(this)" id="p'+max+'" type="button" value="按钮"/></p>';
				div1.innerHTML += str;
			}
		}
	</script>
 </body>
</html>


allWords
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript:document.write()和innerHTML的区别
alex_wen2014的博客
04-16 667
document.write和innerHTML 主要区别：document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘 下面举两个例子说明,第一个例子使用write()方法，第二个例子使用innerHTML 例子一：页面有初始内容，点击页面中的按钮向页面中通过document.wr...
JavaScript中的innerHTML使用
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
JavaScript之innerHTML和outerHTML，innerText和outerText
最新发布
Karka_的博客
09-15 4504
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
javascript 中innerHTML的用法
美丽的大黄人
06-25 1万+
javascript 中innerHTML的用法 语法 Object.innerHTML = “HTML”;//设置其内容 var html = Object.innerHTML;//获取其内容 例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
InnerHtml注入JavaScript的问题
jimmyleeee的专栏
02-18 1407
最近做一个小测试，就是在标签的innerHTML中注入一段script脚本， 测试代码如下： <html> <body> <div id="div1"></div> </body> <script type="text/javascript"> var data = "{{{data}}}"; var objDiv = document.getElementById("div1"); o
JavaScript之innerHTML
weixin_30885111的博客
01-04 211
一.初认识 innerHTML是元素里的文字 换行 标签... innerHTML可进行读操作 格式:变量名.innerHTML innerHTML可进行写操作 格式:变量名.innerH=值(可是文字,也可是标签) 二.innerHTML的读操作示例 1 <!DOCTYPE html> 2 <html lang="en"> ...
Javascript中innerHTML用法实例分析
10-24
主要介绍了Javascript中innerHTML用法,实例分析了实用innerHTML获取对应元素内容的使用技巧,需要的朋友可以参考下
javascript中innerHTML 获取或替换html内容的实现代码
10-15
JavaScript中的innerHTML属性是一个非常实用的功能，它允许我们获取或替换HTML元素内部的HTML内容。这个属性在网页动态更新和DOM（文档对象模型）操作中扮演着重要角色。在这篇文章中，我们将深入理解innerHTML的...
JavaScript中innerHTML，innerText，outerHTML的用法及区别
12-28
不废话了，请看下文示例介绍。 用法： <span xss=removed>test1</span> test2 在JS中可以使用： test[removed]: ...　上例中的test[removed]的值也就是...　上例中的text.innerTest的值也就是“test1 test2
【Web】html+css+js实现post简易聊天室
沙师弟专栏
10-10 1万+
因为项目需求，就做了一个简易的聊天室，用户输入一句话，通过http-post请求简单的回复一些信息给用户。 文中的url是内网的ip地址，你们可以换成你们的url地址。 先设置好参数，参数作用： 通过Words.innerHTML的形式，将产生的回复信息< div >标签插入到聊天框种，并把输入框置空，然后把滑动条滑动到最下面。就完成了一个简单的聊天。 读者可自行修改样式，把这个简易的聊天室做的更完美。
让innerHTML中的script脚本执行起来
01-08
下面介绍怎么样让跑起来。 分析问题 既然只在文档加载中才被解析，那么我就得调用[removed]()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把[removed]()装载起来。 解决问题 var jsCode = 需要执行的JS代码 var jsIframe = document.createElement(iframe); jsIframe.style.display = none;//把jsIframe隐藏起来 document.body.appendChild(jsIframe); with(window
html&JavaScript&innerHTML演练（计算器）：获取HTML内容、函数、按钮(三）
psyche_knight的博客
07-26 1098
innerHtml和string()/将数字转化为字符串 1.（一）和（二）的结果都是以alert形式弹出的 2.innerHTML可让结果直接显示在HTML页面上（上篇是通过alert弹出来的） 3.表示元素里面的HTML，可通过innerHTML在JS中改变页面上元素显示的内容 HTML内容<!doctype html> <html> <body><form> 第一个数字：<br> <i
javascript中的innerHTML是什么意思，怎么个用法？
热门推荐
奔跑的蜗牛
09-22 10万+
nnerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容
js中的innerHTML的作用
xiaosheng
10-06 1万+
js中常常用到innerHTML，其作用就是获取到标签里面的内容，同时也可以为标签添加内容 &lt;div&gt; &lt;p id="text"&gt;hello world&lt;/p&gt; &lt;/div&gt; &lt;script&gt; var oText = document.getElementById("text"); alert(oTe
javascript中innerHTML、innerText、outertHTML的区别与各自的用法
刀刀的专栏
03-13 1万+
示例代码： test1 test2 test.innerHTML          也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“test1 test2 ”。 test.innerText 　　从起始位置到终止位置的内容, 但它去除Html标签 。上例中的text.innerText的值也就是“test1 t
javascript中的innerHTML和innerText的知识点
程宇寒
12-10 1135
javascript中的innerHTML和innerText的知识点 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;javascript中的innerHTML和innerText的知识点,雪豹软件工作室,javascript&lt;/title&gt; &
JS中的innerHTML，innerText，value的区别
gabby____的博客
09-08 3万+
一、区别 innerHTML 在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。 innerTEXT 打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。 value 显示双引号中的全部内容，显示标签，标签无效。 二、举例 例一 1、innerHTML &lt;!doctype html&gt; &lt;html lan...
html文本怎么展开收齐文字,javascript使用substring实现的展开与收缩文字功能示例...
weixin_35651612的博客
06-01 336
本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考，具体如下：效果如图：www.jb51.net 展开和收缩p {margin: 0 auto;width: 500px;padding: 20px;border: 5px solid #888;background-color: #ffcc33;}window.onload = function(...
在innerHTML中执行Javascript代码
weixin_34194551的博客
07-31 593
以下是javascript的函数.var global_html_pool = [];var global_script_pool = [];var global_script_src_pool = [];var global_lock_pool = [];var innerhtml_lock = null;var document_buffer = ""; function set_inne...
JavaScript中innerHTML如何添加标签体内容
06-06
要在JavaScript中使用innerHTML添加标签体内容，可以使用字符串拼接的方式来实现。例如，如果要在一个div元素中添加一个p元素，并在p元素中添加一段文本，可以按照以下方式操作： ```javascript var myDiv = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值