`

insertAdjacentHTML动态插入行

    博客分类:
  • RIA
阅读更多
添加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

    综上所述,`insertAdjacentHTML`是JavaScript中用于DOM操作的一个强大工具,它能够精确地控制HTML内容的插入位置,对于创建动态交互的网页有着重要作用。通过合理运用这个方法,开发者可以轻松实现各种复杂的页面...

    深入理解javascript动态插入技术

    动态插入的关键在于两个主要的JavaScript属性:`innerHTML`和`insertAdjacentHTML`。`innerHTML`属性允许我们获取或设置指定元素内的HTML内容。使用`innerHTML`可以读取元素内的HTML内容,或者替换、添加新的内容。...

    js 动态插入html元素

    在JavaScript编程中,动态插入HTML元素是一项常见的任务,特别是在构建交互式网页时。这项技术允许我们在用户的操作或者程序运行过程中,根据需要向页面添加、修改或删除DOM(文档对象模型)元素,从而实现动态更新...

    利用javascript动态添加行(原创)

    7. **优化与性能**:对于大数据量的动态添加,考虑使用`insertAdjacentHTML()`方法,它可以直接将HTML字符串插入到指定位置,避免了频繁的DOM操作。此外,使用`createDocumentFragment()`可以减少DOM重绘,提高性能...

    在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    这种方法虽然稍显复杂,但是可以很好地模拟`insertAdjacentHTML`的功能,用于在表格中动态插入多行。它的优点是不需要直接修改原有的`&lt;table&gt;`元素,而是通过中间的DOM操作,这可以增加代码的灵活性和可控性。 在...

    在table中插入多行,能使用与insertAdjacentHTML相似的功能吗?

    对于div等元素来说,插入一段html是很容易的事情,但是对于表格来说就太难了。一般情况下,我们都是用appendChild的方式,一行行、一格格地添加,操作起来很...插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    Jquery内容插入光标处插件

    3. **插入内容**:当获取到光标位置后,插件会使用JavaScript的`insertAdjacentHTML`方法或者通过创建`range`对象来在指定位置插入新内容。在jQuery中,这可能涉及到`beforeBegin`、`afterEnd`等定位参数。 4. **...

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

    在网页动态更新中,有时我们需要在已有HTML结构的特定位置插入新的内容,而`insertAdjacentHTML`和`insertAdjacentText`方法就是实现这一需求的重要工具。这两个方法属于DOM(Document Object Model)的一部分,允许...

    javascript动态添加tr节点

    以上代码将根据`data`数组动态创建`tr`行和`td`单元格,并将它们添加到表格中。这在处理动态数据或用户交互时非常有用,比如表格的增删改查功能。 此外,现代JavaScript提供了更简洁的DOM操作方式,如使用`template...

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    `insertAdjacentHTML`允许向指定位置插入HTML字符串。这对于动态生成HTML结构非常有用,特别是在构建复杂的DOM时。同样地,该方法也只在部分浏览器中可用。 #### 参数说明 - **where**: 插入位置,与`...

    dom-insert-html:使用“insertAdjacentHTML”的 HTML 字符串 DOM 插入方法

    HTML 字符串 DOM 插入方法。 使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法: after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) :...

    vc设置html字体格式及插入对象

    在VC++中,你可以动态生成`&lt;img&gt;`标签并插入到HTML文档中,或者如果你已经有HTML源码,可以通过MSHTML接口直接修改。以下是一个例子,假设你有一个本地图片文件`image.jpg`,你想将其插入到HTML文档中: ```cpp ...

    动态添加和删除上传图片的方法

    - `insertAdjacentHTML()`: 用于向目标元素的指定位置插入HTML字符串。 - `removeChild()`: 用于移除子节点。 #### 动态添加上传控件 在用户点击“添加文件”链接时,执行`addUpload()`函数,该函数的主要逻辑如下...

    js简单实现表单中点击按钮动态增加输入框数量的方法

    总结来说,通过掌握JavaScript的鼠标点击事件和insertAdjacentHTML方法,我们可以灵活地根据用户的交互行为来动态地修改页面内容,极大地丰富了网页的交互性。在实现类似功能时,开发者应当注意代码的规范性和可维护...

    table-rowspan表格自动合并单元格插件

    比如,`querySelector`和`querySelectorAll`用于获取单个或多个匹配CSS选择器的元素,而`insertAdjacentHTML`和`removeChild`则分别用于插入和删除元素。 8. **CSS样式**:为了使表格看起来更美观,插件可能还会...

    ajax动态加载列表框

    这可能涉及DOM操作,如`innerHTML`或`insertAdjacentHTML`来添加新的`&lt;option&gt;`元素。 4. **优化用户体验** 在等待服务器响应期间,可以显示加载提示,提高用户体验。此外,考虑到错误处理,需要设置适当的错误回...

    图片ajax动态分批加载

    4. **动态加载图片**:将新图片的信息插入到页面的适当位置,更新DOM结构。 具体实现时,可以创建一个PHP脚本,如`load_images.php`,用于处理AJAX请求,根据传入的页码返回相应图片数据。前端使用JavaScript编写...

Global site tag (gtag.js) - Google Analytics