热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在指定的地方插入html内容和文本内容_javascript技巧

本文为大家介绍个小技巧可以在指定的地方插入html内容和文本内容,示例如下,感兴趣的朋友可以参考下
dhtml提供了两个方法来进行添加,insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法:在指定的地方插入html标签语句。
原型:insertAdjacentHTML(swhere,stext)
参数:
swhere:指定插入html标签语句的地方,有四种值可以用:
1.beforeBegin:插入到标签开始前
2.afterBegin:插入到标签开始标记后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
例:

代码如下:


var sHTML="
"
var sScript='';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);


在html正文中加入一行:

最终变成:

代码如下:






insertAdjacentText方法与insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同

这两个属性还是比较适用的,尤其是在绘图等地方用的比较多,它的优点是不会覆盖原有的内容,让我们来假设一下吧,有一个DIV,它里面已经有内容了,现在我们还要动态的添加内容进去,而又不能覆盖原有的内容,那么这时候这个东西就很重要了,innerHTML是会把原有的东西覆盖掉的。
所有成对出现的HTML都可以用这个属性,这点和innerHTML一样,比如..、

....

等这些都有这两个属性

补充下:刚才我试了下,innerHTML这个属性是可读写的,以前我知道innerHTML可以对节点插入内容,但是这个属性也是可读的,也就是说innerHTML中保存的是节点的html内容;看下以下代码就完全明白了:

代码如下:


safdsdaf按时地方


上面是我转帖到别人的代码,下面我再补充几行代码,也很经典有,也许你用的着:

代码如下:


上面的是Head里面的脚本,下面是body里面的:html代码:

代码如下:






你把代码拷贝到文件中保存成一个html就知道效果了。
推荐阅读
  • Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 我有使用googledrivepdf的共享链接,我必须使用angular7下载pdf文件。我已经完成了自欺 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ... [详细]
  • JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言,只能由浏览器解释执行。其中:脚本语言:解释运行( ... [详细]
  • JavaScript实现在页面间传值的方法-本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下:问题如下:在a.html页面中,的 ... [详细]
  • 本文介绍了Perl的测试框架Test::Base,它是一个数据驱动的测试框架,可以自动进行单元测试,省去手工编写测试程序的麻烦。与Test::More完全兼容,使用方法简单。以plural函数为例,展示了Test::Base的使用方法。 ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
author-avatar
卡瑙娇管
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有