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>
<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>
添加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>
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>
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>
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>
相关推荐
在深入理解JavaScript动态插入技术的探讨中，我们首先关注到的是动态插入技术的核心概念，即如何使用JavaScript将HTML内容动态地添加到网页中。这类技术允许开发者在不重新加载页面的情况下，修改页面的结构和内容。...
总的来说，"DIV+CSS JavaScript代码购物网页(贵美)"是一个综合性的前端开发实例，涵盖了网页结构、样式设计和动态功能实现的多个方面，对于学习和提升前端技能是非常有价值的实践案例。在实际的项目中，还需要考虑到...
在提供的压缩包文件中，"DIV中光标位置插入内容.html"可能是演示这个功能的一个网页文件，其中包含了实现这一功能的HTML结构和JavaScript代码。打开这个文件，你可以看到具体的操作示例，并且可以根据需求进行修改和...
这段JavaScript代码用于显示页面的最后修改时间。它利用了`document.lastModified`属性，该属性返回文档最后一次被服务器修改的时间。 ### 7. 关闭当前窗口 ```javascript <a href="/" onClick="javascript:window...
在前端开发中，有时我们需要通过JavaScript来动态地调整页面元素的位置，比如实现两个`<div>`元素的位置互换。本篇文章将详细解析如何通过JavaScript实现这一功能，并深入探讨相关技术细节。 #### 核心概念与原理 ...
在探讨如何将图片插入到网页中的过程中，我们首先需要理解几个基本的概念：HTML（超文本标记语言）是用于创建网页的标准标记语言；CSS（层叠样式表）则用来描述HTML文档的外观和格式；而Flash则是一种动画制作软件，...
在上面的代码中，我们为div添加了`@drop`和`@dragover`事件监听器，用于处理拖放操作。`ref="smsContent"`用于在Vue实例中引用这个div，方便后续操作。 接下来，我们需要定义Vue实例中的方法来处理拖放事件和插入...
JavaScript代码通常嵌入在HTML文件的`<script>`标签中，或作为外部`.js`文件引用。 在"Pages"文件夹中，可能包含多个HTML页面，每个页面可能有自己的独特布局和交互。"Images"文件夹则很可能存储了项目中使用的各种...
这通常包括CSS（层叠样式表）用于定义样式，JavaScript用于添加动态功能，以及可能的HTML片段用于插入特定元素。确保你已下载或复制了所有必要的文件。 2. **HTML插入**：对于HTML片段，你需要将其添加到你的网页中...
`test.js`可能是实现这种功能的一个脚本文件，其中包含了动态插入HTML元素的JavaScript代码。 在`Noname1.html`这个文件中，很可能展示了一个使用JavaScript动态插入HTML元素的实际例子。你可以打开这个文件查看其...
另一种是使用JavaScript动态插入代码，通过创建`<textarea>`或`<div>`元素，然后将代码作为文本内容插入，这种方式便于后续的格式化和高亮操作。 2. **代码格式化**：为了保持代码的整洁和易读性，我们需要对插入的...
5. **动态插入和更新内容**：如果对话框需要展示动态内容，可以通过JavaScript动态修改div内的HTML内容，或者通过Ajax请求获取并加载远程数据。 6. **兼容性处理**：为了确保在不同浏览器中都能正常工作，可能需要...
接下来，将构建好的图片链接插入到HTML代码中。示例代码如下： ```html 股票代码: 600030 <div> 分钟图"> </div> <div> 日线图"> </div> ``` ### 三、进阶技巧 #### 3.1 自动刷新 为了确保用户始终能看到最新...
韩顺平老师的课程"轻松搞定网页设计html+(DIV+CSS)+javascript"旨在帮助初学者掌握这些技能。以下是对这些知识点的详细解释： 1. HTML（HyperText Markup Language）： HTML是用于创建网页的标准标记语言。在提供...
在`getDragend`中，我们通过`indexOf`找到旧数据和新数据在数组中的索引，然后使用`splice`方法进行删除和插入操作。最后，调用一个名为`Api`的函数来持久化拖放后的新排序。 为了实现拖放动画，我们在CSS中定义了...
它的API设计使得编写JavaScript代码变得更加简洁和高效。 2. **动态生成HTML元素**： - **创建元素**：使用`$('<div>')`或`$('<table>')`可以创建新的DOM元素。例如，创建一个带有特定ID的DIV：`$('<div>', {id: '...
JavaScript代码会找到这个元素，并将格式化后的时间文本插入到其中。例如： ```javascript document.getElementById('clock').innerText = formatTime(hours, minutes, seconds); ``` `formatTime`函数会把小时、...
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml:lang=en>... <head> ...script type=text/javascript src
在示例中，动态增加新层主要通过JavaScript代码实现无刷新添加新的DIV层。一般的做法是使用JavaScript动态创建DIV元素，设置其样式和属性，并将其添加到页面的body中或指定的父元素中。这种方式可以实现在不刷新页面...
2. **复制div到canvas**：由于`canvas`无法直接将`div`内容绘入，我们需要先将`div`的CSS样式转换为内联样式，然后使用`innerHTML`或`outerHTML`将`div`的内容插入到`canvas`的`getContext('2d')`的绘图环境中。...