添加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方法类似,只不过只能插入纯文本,参数相同
分享到:
相关推荐
在软件开发中,尤其是涉及到网页动态更新和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. **异步处理**:如果城市数据是从服务器...