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

 本文为大家介绍个小技巧可以在指定的地方插入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就知道效果了。 
 

时间: 2024-08-30 13:31:53

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

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

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

《Java EE核心框架实战》—— 2.7 插入超大的字符串文本内容

2.7 插入超大的字符串文本内容 MyBatis框架也支持Oracle的CLOB,不需要特别的环境配置即可完成对CLOB字段的操作. 创建名为bigCLOB的Web项目,映射文件userinfoMapping.xml的代码如下. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.12 技巧:在指定的位置插入元素

3.12 技巧:在指定的位置插入元素 append().appendTo().prepend()和prependTo()函数是以选取已存在的元素为基准插入新内容的.有时候,想新建的元素是兄弟元素而不是子元素.代码清单3-12演示了实现该功能的一种可选方法. 代码清单3-12 在一组按钮之前和之后插入元素 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>The af

word-C# .NET,操作WORD在指定字符串位置插入图片。

问题描述 C# .NET,操作WORD在指定字符串位置插入图片. 我是用这句代码插入的图片: //插入图片 object Anchor = myWord.Application.Selection.Range; bp.Save(bmpPath); myDoc.InlineShapes.AddPicture(bmpPath, ref Nothing, ref Nothing, ref Anchor); Anchor是当前行,我就是想把Anchor变成指定字符串的位置. 或者大神有其他方法也希望能够

word2013如何在指定的页面插入页码

  在指定的页面插入页码的步骤如下: 步骤一:如正题,这里是首页,光标移动到最后一行,然后做如图操作 步骤二:阅读下这里"下一页"的意思 ,便于你个人的理解,这里的"下一页"实际上是进入下一个章节.那么我们把首页做为一个单独的章节,和其他章节分开,这样就可以单独操作首页这个章节.(你明白了吗?), 步骤三:如图单击下一页即可: 步骤四:现在你的"光标"移动 下一章 的第一页的最后一行. 步骤五:找到"插入"菜单 , 然后找到

DISCUZNT 程序做的论坛,现在需要在发帖子的时候,把帖子内容传到别的地方,但是 接受到的内容都显示 问号,也不象是乱码,请指教

问题描述 DISCUZNT程序做的论坛,现在需要在发帖子的时候,把帖子内容传到别的地方,但是接受到的内容都显示问号,也不象是乱码,请指教解决了好久想不明白问题,,也经过编码转换处理,但是怎样都是显示问号,有类似问题的朋友请帮忙 解决方案 解决方案二:我会时时关注...请大家帮帮忙解决方案三:显示成问号一定是编码问题..你发送自己定我的东东来测试你的代码..解决方案四:应该是字符集的问题把你的页面改为gb2312或者utf-8试试解决方案五:编码是UTF-8的,,把他转成任何编码,,结果都是???

编程-VFP 更新表数据时自动把系统时间写入表中指定一列插入 如何实现自动写入数据

问题描述 VFP 更新表数据时自动把系统时间写入表中指定一列插入 如何实现自动写入数据 VFP编程 现有 成绩 用户 两表 成绩表 三列 成绩 修改时间 用户 用户表 两列 用户名 密码 其中插入与更新成绩后,自动提取系统时间 写入 "修改时间列"( 包含年月日的时间 ) 并且根据系统登录的用户,将用户名写入成绩表 用户列 修改时间以及 用户 这两列只能通过程序自动写入 不可以人为写入 现有两表 教师 用户 如何实现插入教师表中教师号一列的数据后 自动将数据插入到用户表中 用户名列 用

[Java] 利用xpdf库获取pdf文件的指定范围文本内容

[Java] 利用xpdf库获取pdf文件的指定范围文本内容 编写者 日期 关键词 郑昀@ultrapower 2005-8-2 Java PDF xpdf   概述 读取PDF文件的某一部分文本内容,可以使用开源项目xpdf. 从Java中调用xpdf,我们参照了<Java抽取Word,PDF的四种武器>文章最后提到的办法. 总而言之,调用xpdf十分简单,下面讲一下xpdf的配置问题. 系统基础环境要求 下面是对运行xpdf软件服务的计算机的要求: l         您可以从以下位置下载

asp.net 上传图片,并且显示在指定的地方。

问题描述 asp.net 上传图片,并且显示在指定的地方. 上传一张logo,需要的时候可以在某个页面更换首页logo.求大神给个具体的代码.谢谢 解决方案 http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html 解决方案二: asp.net中图片的上传与显示asp.net上传图片并显示ASP.NET的图片上传和显示 解决方案三: 代码你可以到一些网站上去弄 在线 解决方案四: http://download.csd