`
zys08
  • 浏览: 146325 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

insertAdjacentHTML

    博客分类:
  • HTML
阅读更多
 添加html内容(insertAdjacentHTML和insertAdjacentText)
    dhtml提供了两个方法来进行添加,insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法:在指定的地方插入html标签语句。
    原型:insertAdjacentHTML(swhere,stext)
    参数:
    swhere:指定插入html标签语句的地方,有四种值可以用:
              1.beforeBegin:插入到标签开始前
              2.afterBegin:插入到标签开始标记后
              3.beforeEnd:插入到标签结束标记前
              4.afterEnd:插入到标签结束标记后
              stext:要插入的内容
      例:var sHTML="<input type=button onclick=" +     "go2()" + " value='Click Me'><BR>"
      var sScript='<SCRIPT DEFER>'
      sScript = sScript +     'function go2(){ alert("Hello from inserted script.") }'
      sScript = sScript + '</script' + '>';
      ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
      在html正文中加入一行:
    <DIV ID="ScriptDiv"></Div>
     最终变成:
    <DIV ID="ScriptDiv">
       <input type=button onclick=go2() value='Click Me'><BR>
       <SCRIPT DEFER>
         function go2(){alert("Hello from inserted sctipt.")}'
       </script>
     </DIV> 
     insertAdjacentText方法与insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同
分享到:
评论

相关推荐

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

    在软件开发中,尤其是涉及到网页动态更新和DOM操作时,`insertAdjacentHTML`是一个非常实用的方法。这个方法允许开发者在指定的位置动态插入HTML内容,相比`innerHTML`和`innerText`,它提供了更多的灵活性。`...

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...

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

    但是,`insertAdjacentHTML`方法并不直接适用于表格元素中添加行(tr元素)。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法,这两种方法可以用来将新的`&lt;tr&gt;`元素添加到表格的`...

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

    一般情况下,我们都是用appendChild的方式,一行行、一格格地添加,操作起来很繁锁。能不能拼一串字符,就能直接加入到表格中呢? 下面的例子实现了这个功能,同样地,该例支持IE和firefox。... ...

    eslint-plugin-no-unsanitized:自定义ESLint规则可禁止不安全的innerHTML,outerHTML,insertAdjacentHTML等

    在不使用预定义转义功能的情况下,我们将不允许分配(例如,对innerHTML)和调用(例如,对insertAdjacentHTML)。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...

    深入理解javascript动态插入技术

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

    javaScript重要知识

    使用`insertAdjacentHTML()`或`insertAdjacentText()`方法,可以在DOM元素的前后插入内容。 **示例代码:** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....

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

    或者使用更现代的方法,利用`createElement`和`appendChild`,或者使用`insertAdjacentHTML`方法: ```javascript var container = document.getElementById('container'); var newP = document.createElement('p')...

    js 动态插入html元素

    例如,`element.insertAdjacentHTML('beforeend', '&lt;button&gt;Click me&lt;/button&gt;')`会在`element`的末尾添加一个按钮。 在实际应用中,我们通常会结合使用这些方法。例如,你可能先用`createElement()`创建一个元素,...

    javascript动态添加tr节点

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

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

    document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv); } ``` #### 动态删除上传控件 当用户点击某一个文件上传控件旁边的“删除”按钮时,执行`delUpload()`函数,该函数的主要...

    HTML5 元素通用DOM接口

    - **`insertAdjacentHTML(in DOMString position, in DOMString text)`** 此方法用于将新的HTML片段插入到当前元素附近。`position`参数可以是以下四个值之一:“beforebegin”、“afterbegin”、“beforeend”或...

    引用 js在IE与FF之间的区别详细解析

    Firefox使用insertAdjacentElement,而IE则使用insertAdjacentHTML。 当我们在JavaScript中使用HTML元素创建或操作时,Firefox不支持通过createElement直接创建包含HTML代码的元素,必须通过document.write或者创建...

    ASP.NET上传和下载文件的代码

    document.getElementById('MyFile').insertAdjacentHTML("beforeEnd", str); } ``` #### 后台代码分析(C#) **C#部分**:负责处理从前台传来的HTTP请求,包括对文件的接收和处理逻辑。 ```csharp private void ...

    Js弹出div和关闭

    接下来构建一个包含样式信息的`div`字符串,最后使用`insertAdjacentHTML`方法将这个`div`插入到文档的`body`开始位置。 #### 关闭div的实现 为了使弹出的`div`可以被关闭,我们需要定义一个函数来改变该`div`的...

    图片批量上传代码 可以学习!

    document.getElementById("MyFile").insertAdjacentHTML("beforeEnd", str); } ``` #### 3. 处理上传的文件 在服务器端代码中,通过`HttpContext.Current.Request.Files`可以访问到上传的文件集合。然后,遍历这...

    【JavaScript源代码】vue实现放大缩小拖拽功能.docx

    dialogHeaderEl.insertAdjacentHTML('beforeEnd', '&lt;div class="bigbtn"&gt;&lt;div class="changeBig"&gt;&lt;/div&gt;&lt;div class="changeSmall"&gt;&lt;/div&gt;&lt;/div&gt;'); const bigBtn = el.querySelector('.bigbtn'); const changeBig...

    省份与城市关联的javasrcipt代码

    4. **动态生成HTML**:根据用户选择的省份,我们可以遍历上述数据结构,然后使用`innerHTML`或者`insertAdjacentHTML`等方法动态生成HTML选项,填充到城市选择列表中。 5. **异步处理**:如果城市数据是从服务器...

Global site tag (gtag.js) - Google Analytics