添加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.getElementById("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>
分享到:
相关推荐
insertAdjacentHTML动态插入行[归类].pdf
一般情况下,我们都是用appendChild的方式,一行行、一格格地添加,操作起来很繁锁。能不能拼一串字符,就能直接加入到表格中呢? 下面的例子实现了这个功能...插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在table中插入多行,能使用与insertAdjacentHTML相似的功能
这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉,见下面运行框的结果: 代码如下:<!doctype html><html dir=”ltr” lang=”zh-CN...
原型:insertAdjacentHTML(swhere,stext) 参数: swhere:指定插入html标签语句的地方,有四种值可以用: 1.beforeBegin:插入到标签开始前 2.afterBegin:插入到标签开始标记后 3.beforeEnd:插入到标签结束标记前 4....
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...
HTML 字符串 DOM 插入方法。 使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法: after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) :...
在不使用预定义转义功能的情况下,我们将不允许分配(例如,对innerHTML)和调用(例如,对insertAdjacentHTML)。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
首先,要谢谢CSDN hbhbhbhbhb1021(天外水火(我要多努力))和cuixiping(无心)的提醒。我会抽空把IE专有的方法如:...行innerHTML和insertAdjacentHTML速度的测试,比均结果相差不会大于20ms(平均速度),在I
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。
本文这里给大家说个用javascript实现的很实用的功能,是在上传附件的时候,可以动态地添加和删除文件选择框,然后一次性上传。 从理论上看,实现起来比较容易,但实际工作的时候还是遇到两个难点,这些难点归结起来...
interface HTMLElement : ... void insertAdjacentHTML(in DOMString position, in DOMString text); // metadata attributes attribute DOMString id; attribute DOMString title; attribute DOMString lang;
【利用WebBrowser彻底解决Web打印问题(包括后台打印) 】利用WebBrowser彻底解决Web打印问题(包括后台打印)BS架构下的打印大家是...总之,WebBroswer已经为我们提供了解决方案,我们只要结合需求把它应用好就行了。
Mozilla中独有的读写器(defineGetter、defineSetter)以及可以给Element,Event等加上prototype原型,使得在IE里用的方法同样在Mozilla中可以适用,下面贴出常用的一些代码 例如 obj.insertAdjacentHTML, ...
基于原始来源,如果您想创建自己的样式,则可以修改css\content.css ,然后使用一些CSS压缩器对其进行压缩,然后将其全部复制到js\content.js jfStyleEl.insertAdjacentHTML调用中js\content.js
insertAdjacentHTML ( 'afterbegin' , svg ) ; } ) . catch ( err => { console . log ( err ) ; } ) ; 原料药 svgLocalstorage(文件,修订版) 此方法返回一个Promise 文件 必填类型: string 您希望缓存...
到页面,或者使用JavaScript在需要的时候临时添加也可以: 代码如下: document.body.insertAdjacentHTML(“beforeEnd”, “<object id=\”WebBrowser\” width=0 height=0 \ classid=\”clsid:88