insertAdjacentHTML。动态插入行

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
添加HTML 内容与文本 内容以前用的是innerHTML与innerText方法,最近发现还有insertAdjacentHTML和insertAdjacentText方法,这两个方法更灵活,可以在指定的地方插入html 内容和文本 内容

insertAdjacentHTML方法:在指定的地方插入html标签语句

原型:insertAdajcentHTML(swhere,stext)

参数:

swhere: 指定插入html标签语句的地方,有四种值可用:

1.     beforeBegin: 插入到标签开始前

2.     afterBegin:插入到标签开始标记之后

3.     beforeEnd:插入到标签结束标记前

4.     afterEnd:插入到标签结束标记后

stext:要插入的内容

<html>

   <head>

    <script language="javascript">

       function myfun()

         {

             var obj = document.getElementByIdx("btn1");

              obj.insertAdjacentHTML("afterEnd","<br><input name=\"txt1\">");

         }

      </script>

   </head>

   <body>

     <input name="txt">

     <input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">

   </body>

</html>

=============================

<head>
<title>24.htm insertAdjacentHTML插入新内容</title>
<script language="jscript">
function addsome()
{
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>
</body>
</html>

=================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<script>
var num=0;
var No_sys=0;function Add_button(){
if(No_sys<8){
   c_input.insertAdjacentHTML("beforeEnd","<div id=\"bar"+num+"\" oncontextmenu=\"Remove_button(bar"+num+");return   false\" style=\"background:red;width:40;height:20\">"+num+"</div>");
   num++;
   No_sys++;
}
}function Remove_button(obj){
obj.removeNode(true);
No_sys--;
}
</script>
<input type="button" onclick="Add_button()" value="动态加">
<input type="button" onclick="alert(c_input.innerHTML)" value="看">
<div id="c_input">
</div>  
</BODY>
</HTML>
本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2008/02/26/2912226.html   ,如需转载请自行联系原作者
相关文章
|
4月前
|
网络虚拟化 网络架构 智能硬件
动态IP/静态IP
动态IP和静态IP简介:动态IP由ISP通过DHCP自动分配,不固定且无需手动设置,具有较高安全性和成本优势,但不适合对外服务;静态IP地址固定不变,适合需要长期稳定连接的设备,便于远程访问和管理,但安全性较低、成本较高且可能造成资源浪费。两者分别适用于不同场景,如临时设备使用动态IP,服务器及企业网络设备使用静态IP。
338 13
|
5月前
|
存储 人工智能 自然语言处理
0 代码焦虑!阿里云 Bolt.diy 一键解锁你的专属网站,30 分钟惊艳上线
Bolt.diy 是阿里云推出的智能化建站工具,基于函数计算 FC 和百炼模型服务,通过自然语言描述即可快速生成网站。无需本地配置环境,3分钟完成部署,适合各水平用户。支持个性化定制、域名绑定及数据备份,安全可靠。无论是个人博客还是企业官网,都能轻松实现。立即领取免费额度体验:[部署链接](https://www.aliyun.com/solution/tech-solution/fc-bolt-diy?utm_content=g_1000403257)。
197 4
|
3月前
|
人工智能 分布式计算 DataWorks
大数据& AI 产品月刊【2025年5月】
大数据& AI 产品技术月刊【2025年5月】,涵盖5月技术速递、产品和功能发布、市场和客户应用实践等内容,帮助您快速了解阿里云大数据& AI 方面最新动态。
|
8月前
|
API 数据处理 开发者
获取淘宝分类详情:深入解析taobao.cat_get API接口
淘宝开放平台推出的`taobao.cat_get` API接口,帮助开发者和商家获取淘宝、天猫的商品分类详情。该接口支持获取类目列表、属性及父类目信息,通过指定分类ID(cid)实现精准查询,并提供灵活的参数设置和高效的数据处理。使用流程包括注册账号、创建应用、获取App Key/Secret、构造请求、发送并解析响应。示例代码展示了如何用Python调用此API。开发者可借此为电商项目提供数据支持。
|
4月前
|
网络协议 Linux 网络安全
高级网络配置
高级网络配置
134 7
|
6月前
|
云安全 存储 安全
阿里云安全体检功能深度评测报告
本次体检通过深度扫描发现了4类安全隐患:高危端口暴露、未修复的Log4j2漏洞、OSS存储桶权限错误。针对这些问题,我们采取了具体修复措施,如限制源IP、热更新参数等。体检项目在安全组可视化、漏洞修复指引等方面表现出色,但也存在容器安全检测不足等问题。建议增加一键阻断功能和OpenAPI接口,优化误报反馈机制,并添加合规检测模块。总体而言,阿里云安全体检在风险发现效率上表现优异,建议与云防火墙等产品联动,形成动态防御体系。
|
6月前
|
数据可视化 数据挖掘 BI
Quick BI 深度体验:数据洞察,触手可及——打造智能零售分析利器
作为一名数据分析师,我深度体验了阿里云Quick BI。这是一款功能强大的全场景BI平台,支持多数据源接入与智能分析,操作简单且智能化程度高。通过上传Excel文件即可快速生成数据集,并利用丰富图表进行可视化分析。其“智能小Q助手”可对话式查询数据、自动生成报表,极大降低分析门槛。尽管新手引导和移动端体验尚有优化空间,但Quick BI无疑是企业实现数据驱动决策的有力工具。强烈推荐给希望提升业务竞争力的企业!
|
7月前
|
机器学习/深度学习 监控 自动驾驶
《LSTM:开启图像动态场景理解与时间变化信息捕捉的新旅程》
在计算机视觉中,理解图像动态场景并捕捉时间变化信息极具挑战。LSTM作为一种深度学习模型,通过将图像帧序列化并结合CNN提取的空间特征,有效捕捉帧间的时间依赖关系。LSTM的门控机制(遗忘门、输入门和输出门)能智能处理图像序列中的信息,过滤无关数据,保留关键变化。该方法广泛应用于自动驾驶、视频监控及虚拟现实等领域,提升了动态场景的理解与预测能力。
181 13
|
Kubernetes 容器 Perl
在K8S中,Replica Set和Replication Controller之间有什么区别?
在K8S中,Replica Set和Replication Controller之间有什么区别?
|
6月前
|
人工智能 负载均衡 并行计算
阿里云工程师带你独家揭秘:DeepSeek-V3 为何能用 5% 算力对标 GPT-4o?
阿里云工程师带你独家揭秘:DeepSeek-V3 为何能用 5% 算力对标 GPT-4o?
151 0