cindysaj
- 浏览: 395080 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (171)
- 学习网站 (3)
- 生活点滴 (10)
- javascript (35)
- java (8)
- select/option (4)
- SQL (4)
- database存取 (5)
- intra-mart (1)
- java面试相关 (8)
- hibernate (2)
- IDE related (6)
- Websphere (6)
- software development (1)
- ibatis (4)
- JSF (5)
- dojo (6)
- java web (2)
- xml (0)
- DB2 (11)
- version control (4)
- xml,excel,json related (3)
- 工具收集 (1)
- BW (13)
- abap (1)
最新评论
-
Trying：
mysql会怎样呢？编程时，到底要不要排序呢？听说排序会对性能 ...
sql中没有order by,是否存在默认排序 -
yanwushu：
CASE WHEN 有两种表达式写法： ...
oracle case when的用法 -
Matol：
ok，不错的
java去除字符串中的空格、回车、换行符、制表符 -
jianxia801：
现在天下文章一大抄；实际没有这个fromString方法：准确 ...
JSON与JAVA的数据转换--String->Bean -
春隆隆：
精辟
java去除字符串中的空格、回车、换行符、制表符
insertAdjacentHTML动态插入行2008-11-27 23:24添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。insertAdjacentHTML方法：在指定的地方插入html标签语句
原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
stext：要插入的内容
insertAdjacentHTML Method Internet Development Index
--------------------------------------------------------------------------------
Inserts the given HTML text into the element at the location.
Syntax
object.insertAdjacentHTML(sWhere, sText)
Parameters
sWhere Required. String that specifies where to insert the HTML text, using one of the following values: beforeBegin Inserts sText immediately before the object.
afterBegin Inserts sText after the start of the object but before all other content in the object.
beforeEnd Inserts sText immediately before the end of the object but after all other content in the object.
afterEnd Inserts sText immediately after the end of the object.
sText Required. String that specifies the HTML text to insert. The string can be a combination of text and HTML tags. This must be well-formed, valid HTML or this method will fail.
Return Value
No return value.
Remarks
If the text contains HTML tags, the method parses and formats the text as it is inserted.
You cannot insert text while the document is loading. Wait for the onload event to fire before attempting to call this method.
When using the insertAdjacentHTML method to insert script, you must include the DEFER attribute in the script element.
Example
This example uses the insertAdjacentHTML method to insert script into the page.
<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>
原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
stext：要插入的内容
insertAdjacentHTML Method Internet Development Index
--------------------------------------------------------------------------------
Inserts the given HTML text into the element at the location.
Syntax
object.insertAdjacentHTML(sWhere, sText)
Parameters
sWhere Required. String that specifies where to insert the HTML text, using one of the following values: beforeBegin Inserts sText immediately before the object.
afterBegin Inserts sText after the start of the object but before all other content in the object.
beforeEnd Inserts sText immediately before the end of the object but after all other content in the object.
afterEnd Inserts sText immediately after the end of the object.
sText Required. String that specifies the HTML text to insert. The string can be a combination of text and HTML tags. This must be well-formed, valid HTML or this method will fail.
Return Value
No return value.
Remarks
If the text contains HTML tags, the method parses and formats the text as it is inserted.
You cannot insert text while the document is loading. Wait for the onload event to fire before attempting to call this method.
When using the insertAdjacentHTML method to insert script, you must include the DEFER attribute in the script element.
Example
This example uses the insertAdjacentHTML method to insert script into the page.
<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>
分享到：
发表评论
-
window.open()的所有参数列表
2010-08-17 10:42 711【1、最基本的弹出窗口 ... -
javascript IE firefox兼容性
2010-06-22 17:34 1597以下以 IE 代替 Internet Explorer，以 M ... -
js的引号多级嵌套
2010-05-19 13:47 15134今天遇到一个bug,就是引号码层嵌套的问题 var subTa ... -
加纵向滚动条
2010-05-14 11:12 1077version 1 <html> <head ... -
验证数字
2010-03-30 15:57 826function isValidCurrency(input) ... -
IE vs firefox
2010-03-25 12:17 1042IE有children，FireFox没有 document. ... -
window.open()的所有参数列表
2009-01-08 14:12 793前言:经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹 ... -
offsetParent和parentElement的区别
2009-01-08 10:20 1438一直以为offsetParent和parentElement是 ... -
setInterval(),clearInterval
2008-12-16 18:00 1769setInterval() 设置浏览器每隔多长时间以后调用指定 ... -
dom中的children对象数组元素 fistChild,lastChild使用
2008-12-04 17:26 3125children对象数组元素示例 <html> & ... -
event.srcElement
2008-12-04 15:12 998<body > <table heigh ... -
iframe调用父页面的javascript函数
2008-12-03 18:04 7558iframe调用父页面的javascript函数 paren ... -
Readonly和Disabled的区别
2008-12-02 15:58 4705Readonly和Disabled是用在表单中的两个属性，它们 ... -
获得焦点focus()使用example
2008-12-02 15:32 1820<%@ page contentType="t ... -
javascript:void(0) & 刷新页面
2008-12-02 10:36 36731 <a href="#" oncl ... -
document.all
2008-12-01 17:34 1279一. document.all是页面内所有元素的一个集合。例如 ... -
javascript中id和name的区别
2008-12-01 14:58 1792javascript中id和name的区别 id一般来说是唯一 ... -
javascript中的eval函数的用法
2008-12-01 14:56 984javascript中的eval函数的 ... -
向后台传输json对象数组
2008-11-27 17:15 67311function setJson1() { var tbl ... -
createElement,insertBefore,
2008-11-27 17:03 18231、createElement 说明： oElement ...
相关推荐
在软件开发中，尤其是涉及到网页动态更新和DOM操作时，`insertAdjacentHTML`是一个非常实用的方法。这个方法允许开发者在指定的位置动态插入HTML内容，相比`innerHTML`和`innerText`，它提供了更多的灵活性。`...
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法，或者已有的代码大量使用了这些方法的话，就必须为其他浏览器提供...
但是，`insertAdjacentHTML`方法并不直接适用于表格元素中添加行（tr元素）。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法，这两种方法可以用来将新的`<tr>`元素添加到表格的`...
一般情况下，我们都是用appendChild的方式，一行行、一格格地添加，操作起来很繁锁。能不能拼一串字符，就能直接加入到表格中呢？ 下面的例子实现了这个功能，同样地，该例支持IE和firefox。... ...
在不使用预定义转义功能的情况下，我们将不允许分配（例如，对innerHTML）和调用（例如，对insertAdjacentHTML）。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
动态插入的关键在于两个主要的JavaScript属性：`innerHTML`和`insertAdjacentHTML`。`innerHTML`属性允许我们获取或设置指定元素内的HTML内容。使用`innerHTML`可以读取元素内的HTML内容，或者替换、添加新的内容。...
使用`insertAdjacentHTML()`或`insertAdjacentText()`方法，可以在DOM元素的前后插入内容。 **示例代码：** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....
或者使用更现代的方法，利用`createElement`和`appendChild`，或者使用`insertAdjacentHTML`方法： ```javascript var container = document.getElementById('container'); var newP = document.createElement('p')...
例如，`element.insertAdjacentHTML('beforeend', '<button>Click me</button>')`会在`element`的末尾添加一个按钮。 在实际应用中，我们通常会结合使用这些方法。例如，你可能先用`createElement()`创建一个元素，...
此外，现代JavaScript提供了更简洁的DOM操作方式，如使用`template literals`（模板字符串）和`insertAdjacentHTML()`方法，或者利用`fragment`（文档碎片）提高性能。例如： ```javascript var fragment = ...
document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv); } ``` #### 动态删除上传控件 当用户点击某一个文件上传控件旁边的“删除”按钮时，执行`delUpload()`函数，该函数的主要...
- **`insertAdjacentHTML(in DOMString position, in DOMString text)`** 此方法用于将新的HTML片段插入到当前元素附近。`position`参数可以是以下四个值之一：“beforebegin”、“afterbegin”、“beforeend”或...
Firefox使用insertAdjacentElement，而IE则使用insertAdjacentHTML。 当我们在JavaScript中使用HTML元素创建或操作时，Firefox不支持通过createElement直接创建包含HTML代码的元素，必须通过document.write或者创建...
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd", str); } ``` #### 后台代码分析（C#） **C#部分**：负责处理从前台传来的HTTP请求，包括对文件的接收和处理逻辑。 ```csharp private void ...
接下来构建一个包含样式信息的`div`字符串，最后使用`insertAdjacentHTML`方法将这个`div`插入到文档的`body`开始位置。 #### 关闭div的实现 为了使弹出的`div`可以被关闭，我们需要定义一个函数来改变该`div`的...
document.getElementById("MyFile").insertAdjacentHTML("beforeEnd", str); } ``` #### 3. 处理上传的文件 在服务器端代码中，通过`HttpContext.Current.Request.Files`可以访问到上传的文件集合。然后，遍历这...
dialogHeaderEl.insertAdjacentHTML('beforeEnd', '<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>'); const bigBtn = el.querySelector('.bigbtn'); const changeBig...
4. **动态生成HTML**：根据用户选择的省份，我们可以遍历上述数据结构，然后使用`innerHTML`或者`insertAdjacentHTML`等方法动态生成HTML选项，填充到城市选择列表中。 5. **异步处理**：如果城市数据是从服务器...