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

dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法：在指定的地方插入html标签语句。
原型：insertAdjacentHTML(swhere,stext)
参数：
swhere:指定插入html标签语句的地方，有四种值可以用：
1.beforeBegin:插入到标签开始前
2.afterBegin:插入到标签开始标记后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
例：


代码如下:

var sHTML="<input type=button go2()" + " value='Click Me'><BR>"
var sScript='<SCRIPT DEFER>'
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }'
sScript = sScript + '</script' + '>';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);

在html正文中加入一行：
<DIV ID="ScriptDiv"></Div>
最终变成：


代码如下:

<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='Click Me'><BR>
<SCRIPT DEFER>
function go2(){alert("Hello from inserted sctipt.")}'
</script>
</DIV>

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

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

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


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
safdsdaf按时地方
<script language="javascript">
alert(document.body.innerText)
</script>
</body>
</html>

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


代码如下:

<script language="javascript" type="text/javascript">
function addFile()
{
var filebutton = '<br><input type="file" size="50" name="File" />';
document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton);
}
</script>

上面的是Head里面的脚本，下面是body里面的：html代码：


代码如下:

<p id="FileList">
<input type="file" runat="server" size="50" name="File"/>
</p>

你把代码拷贝到文件中保存成一个html就知道效果了。

赞 (0)

相关推荐

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

    dhtml提供了两个方法来进行添加,insertAdjacentHTML和insertAdjacentText insertAdjacentHTML方法:在指定的地方插入html标签语句. 原型:insertAdjacentHTML(swhere,stext) 参数: swhere:指定插入html标签语句的地方,有四种值可以用: 1.beforeBegin:插入到标签开始前 2.afterBegin:插入到标签开始标记后 3.beforeEnd:插入到标签结束标记前 4.afterEnd:插入

  • C#实现winform中RichTextBox在指定光标位置插入图片的方法

    本文实例讲述了C#实现winform中RichTextBox在指定光标位置插入图片的方法.分享给大家供大家参考,具体如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中几个字符 this.richTextBox1.SelectionLength = 2; //清空剪切板,防止里面之前有内容 Clipboard.Clear(); //给剪切板设置图片对象

  • C语言之实现单链表指定结点的插入方式

    目录 单链表指定结点的插入 链表之在指定结点前面或后面插入新的结点 单链表指定结点的插入 #include <bits/stdc++.h> using namespace std; typedef struct node { int data; struct node *next; }no; int main() { no *head,*tail,*p,*q; head=new no; head->next=NULL; tail=head; int n; printf("一共要

  • JS实现选定指定HTML元素对象中指定文本内容功能示例

    JS实现选定指定HTML元素对象中指定文本内容功能示例

    本文实例讲述了JS实现选定指定HTML元素对象中指定文本内容功能.分享给大家供大家参考,具体如下: 该功能用处多多,可以灵活运用之!主要函数如下: //选中文本中指定部分 function selectSomeText(obj,start,end){ if(document.selection){ if(obj.tagName=='TEXTAREA'){ var i=obj.value.indexOf("\r",0); while(i!=-1&&i<end){ e

  • Android开发之文本内容自动朗读功能实现方法

    Android开发之文本内容自动朗读功能实现方法

    本文实例讲述了Android开发之文本内容自动朗读功能实现方法.分享给大家供大家参考,具体如下: Android提供了自动朗读支持.自动朗读支持可以对指定文本内容进行朗读,从而发生声音:不仅如此,Android的自动朗读支持还允许把文本对应的音频录制成音频文件,方便以后播放.这种自动朗读支持的英文名称为TextToSpeech,简称TTS. 借助于TTS的支持,可以在应用程序中动态地增加音频输出,从而改善用户体验. Android的自动朗读支持主要通过TextTospeech来完成,该累提供了如

  • 一天一个shell命令 linux文本内容操作系列-awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理. awk有3个不同版本: awk.nawk和gawk,未作特别说明,一般指gawk,gawk 是 AWK 的 GNU 版本. awk其名称得自于它的创始人 Alfred Aho .Peter Weinberger 和 Brian Kernighan 姓氏的首个字母.实际上 AWK

  • 一天一个shell命令 linux文本内容操作系列-grep命令详解

    从这篇开始,是文本内容操作,区别于文本操作. Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所有用户. shell,perl,python,一直都是文本操作的专家语言,而我们今后学习的的将是shell的噱头--文本操作.下面提到最常见的一个: grep 这算是文本内容的一个重量级选手,能根据某些规格在上千行的文本文件中查找

  • jQuery获取标签文本内容和html内容的方法

    本文实例讲述了jQuery获取标签文本内容和html内容的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过text和html方法获取指定标签的文本内容或者html内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $(&quo

  • 简述Android中实现APP文本内容的分享发送与接收方法

    简述Android中实现APP文本内容的分享发送与接收方法

    谨记(指定选择器Intent.createChooser()) 开始今天的内容前,先闲聊一下: (1)突然有一天头脑风暴,对很多问题有了新的看法和见解,迫不及待的想要分享给大家,文档已经写好了,我需要通过微信或者QQ,短信等社交工具发送给大家. (2)在网上发现一段特别好的文章,想要保存收藏下来. 上面描述了进入智能手机时代后,我们经常遇到的两种情况,那么作为开发者的我们如何让自己开发的APP实现这两种功能呢,下面我们以实现文本的发送分享以及接收来梳理下两种功能的实现过程(其他类型的数据在博文末

  • java解析{{}}变量名以及文本内容替换操作

    发短信.发邮件的时候经常会遇到模板内容需要替换成实际数据的问题,本文介绍从文本模板中解析出变量列表,以及参数填入后得到实际文本内容的办法: /** * 根据正则表达式获取文本中的变量名列表 * @param pattern * @param content * @return */ public static List<String> getParams(String pattern, String content) { Pattern p = Pattern.compile(pattern)

随机推荐