div中动态插入javascript代码

最新推荐文章于 2023-10-13 15:08:32 发布

原创最新推荐文章于 2023-10-13 15:08:32 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #C #C++ #C# #ViewUI

JAVA 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了 HTML 中 insertAdjacentHTML 方法的使用方式及示例代码，该方法允许开发者在指定元素的开始或结束位置插入新的 HTML 内容。文章通过三个不同场景展示了如何利用此方法实现动态内容插入。

<div id="test"></div>
<button onclick="insertHTML()"/>

<script>
function insertHTML(){
var str="aaaaa"+"<script defer> alert('终于能运行JS了，靠！'); </script" + ">";
document.getElementById("test").insertAdjacentHTML("afterBegin",   str);
}
</script>

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 >

************************************************************************************

1 < html >
2 < head >
3 < title > 24.htm insertAdjacentHTML插入新内容 </ title >
4 < script language ="jscript" >

5 function addsome()
6

{
7     document.all.paral.insertAdjacentHTML( " afterBegin " , " <h1>在文本前容器内插入内容</h1> " );
8     document.all.paral.insertAdjacentHTML( " beforeEnd " , " <h2>在文本后容器内插入内容</h2> " );
9     document.all.paral.insertAdjacentHTML( " beforeBegin " , " <h4>在文本前容器外插入内容</h1> " );
10     document.all.paral.insertAdjacentHTML( " afterEnd " , " <h5>在文本后容器外插入内容</h2> " );
11 }
12 </ script >
13 </ head >
14 < body onload ="addsome()" >
15 < div id ="paral" style ="fontsize:6;color='#ff00ff'" > 原来的内容 </ div >< hr >
16 </ body >
17 </ html >

**********************************************************************************

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
2 < HTML >
3 < HEAD >
4 < TITLE > New Document </ TITLE >
5 < META NAME ="Generator" CONTENT ="EditPlus" >
6 < META NAME ="Author" CONTENT ="" >
7 < META NAME ="Keywords" CONTENT ="" >
8 < META NAME ="Description" CONTENT ="" >
9 </ HEAD >
10 < BODY >
11 < script >

12 var num = 0 ;
13 var No_sys = 0 ;
14 function Add_button()

{
15 if (No_sys < 8 )

{
16     c_input.insertAdjacentHTML( " beforeEnd " , " <div id= " bar " +num+ "" oncontextmenu= " Remove_button(bar " +num+ " ); return      false " style= " background:red;width: 40 ;height: 20 " > " + num + " </div> " );
17     num ++ ;
18     No_sys ++ ;
19 }
20 }
21 function Remove_button(obj)

{
22 obj.removeNode( true );
23 No_sys -- ;
24 }
25 </ script >
26 < input type ="button" onclick ="Add_button()" value ="动态加" >
27 < input type ="button" onclick ="alert(c_input.innerHTML)" value ="看" >
28 < div id ="c_input" >
29 </ div >
30 </ BODY >
31 </ HTML >