`

JS insertAdjacentHTML

    博客分类：
  • JS
HTMLJavaScript.net 
阅读更多

http://www.blogjava.net/Scott/archive/2007/08/30/141449.html

 

insertAdjacentHTML方法示例

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)

参数：

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

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

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

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

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

stext：要插入的内容

 

 1 <html>
 2     <head>
 3     <script language="javascript">
 4     function myfun(){
 5         var obj = document.getElementById("btn1");
 6         obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
 7     }
 8     </script>
 9     </head>
10     <body>
11         <input name="txt">
12         <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">
13     </body>
14 </html>

分享到：
| filter应用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    insertAdjacentHTML动态插入行[归类].pdf

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

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

    在JavaScript中，可以利用DOM API来动态地添加或者删除这些元素。`insertAdjacentHTML`是一个强大的方法，允许开发者以字符串的形式插入HTML代码到指定位置。但是，`insertAdjacentHTML`方法并不直接适用于表格元素...

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

    一般情况下，我们都是用appendChild的方式，一行行、一格格地添加，操作起来很繁锁。能不能拼一串字符，就能直接加入到表格中呢？ 下面的例子实现了这个功能，同样地... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    js仿迅雷搜索提示代码

    "js仿迅雷搜索提示代码"是一个利用JavaScript技术实现的功能，它模仿了迅雷搜索的实时提示功能，为用户提供友好的输入建议，提高了用户体验。这个功能通常与后台数据库进行交互，通过AJAX（异步JavaScript和XML）...

    省市县 js 联动效果

    首先，我们需要理解JavaScript（JS）在这其中的作用。JavaScript是一种客户端脚本语言，用于在用户浏览器上执行，可以实时更新网页内容。在省市县联动效果中，JS负责监听用户的选择事件，根据选择的值动态修改DOM...

    深入理解javascript动态插入技术

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

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    本文将深入探讨`innerText`、`insertAdjacentElement`、`insertAdjacentHTML`、`insertAdjacentText`等几个JavaScript DOM操作方法的区别与应用。由于这些方法并非所有浏览器都支持，因此文中还提供了针对不同浏览器...

    JS关键词搜索选择筛选代码.zip

    总结起来，"JS关键词搜索选择筛选代码"涵盖了以下几个主要的JavaScript知识点：事件监听、AJAX请求、数据过滤与渲染、DOM操作以及可能的UI特效。这个代码实例可以帮助开发者学习如何创建动态、交互式的搜索和筛选...

    搜索提示框asp.net+js代码

    当用户在搜索框中输入时，`search.js`中的函数会被调用，该函数可以使用JavaScript的`event.target.value`来获取当前输入的文本。接着，使用`XMLHttpRequest`或现代浏览器的`fetch` API，向`search.aspx`发送POST...

    js下拉框三级联动菜单选择代码

    8. **JavaScript逻辑**：`js`文件是整个功能的核心，包含了上述逻辑的实现。 总的来说，js下拉框三级联动菜单选择代码的实现涉及HTML、CSS和JavaScript三者的协同工作。开发者需要理解DOM操作、事件监听和数据处理...

    javascript动态添加tr节点

    此外，现代JavaScript提供了更简洁的DOM操作方式，如使用`template literals`（模板字符串）和`insertAdjacentHTML()`方法，或者利用`fragment`（文档碎片）提高性能。例如： ```javascript var fragment = ...

    将Html转化成能追加的js格式

    HTML是一种用于构建网页结构的语言，而JavaScript（JS）则是一种能够改变网页内容、行为和样式的编程语言。在动态网页应用中，我们有时需要通过JavaScript来动态地添加HTML元素到已有的DOM（文档对象模型）中。这...

    省市县js无刷新三级联动()

    在IT领域，"省市县js无刷新三级联动"是一个常见的前端开发需求，它涉及到JavaScript、HTML和CSS等技术，主要用于创建交互性强、用户体验良好的网页下拉菜单。这种联动功能允许用户在选择省份后，市和县的选项会自动...

    js 动态插入html元素

    `test.js`可能是实现这种功能的一个脚本文件，其中包含了动态插入HTML元素的JavaScript代码。 在`Noname1.html`这个文件中，很可能展示了一个使用JavaScript动态插入HTML元素的实际例子。你可以打开这个文件查看其...

    js对各标签(控件)的操作

    在 Web 开发中，JavaScript 作为一种强大的客户端脚本语言，被广泛用于实现网页的动态效果与交互性。通过 JavaScript，开发者可以轻松地操作 HTML 文档中的各种元素（标签），从而实现丰富的用户体验。本文将详细...

    js省市县三级联动（好）

    5. **动态渲染**：使用DOM操作方法（如`innerHTML`或`insertAdjacentHTML`）来动态生成并插入新的选项。确保正确设置每个选项的`value`属性，以便后续处理。 6. **初始值**：如果已知某个初始的地区，可以通过...

    js-table分页

    `js-table`可能是指一个专门处理JavaScript表格和分页的库，虽然没有提供具体的库名称，但我们可以探讨一下JavaScript中实现表格分页的一般方法和相关的Java知识点。 在前端开发中，JavaScript通常用于创建动态和...

    JS 日期时间控件

    JavaScript（简称JS）是一种广泛用于网页和网络应用的轻量级编程语言，尤其在处理日期和时间时，它提供了丰富的内置功能。这篇博客文章“JS 日期时间控件”可能探讨了如何使用JavaScript来创建自定义的时间选择器或...

    baidu_Auto

    【标签】"js_search" 明确了此项目专注于JavaScript在搜索功能上的应用，可能是为了展示如何在前端实现高效的搜索功能。 综合以上信息，"baidu_Auto"项目是一个使用JavaScript构建的、具有实时搜索建议功能的百度...

Magicbox
Global site tag (gtag.js) - Google Analytics