用js插入页面的div标签中的内容

JavaScript08

用js插入页面的div标签中的内容,第1张

使用JS的document.getElementById("ID").innerHTML获取标签内容。修改的只需在后面加上"="即可。

实例演示如下:

一、HTML的DOM设计。

1、设计两个DIV,其中第一个div放入入一些文字。

2、设计css样式如下,为了区分明显,加了border。

3、此时的页面展示如下:

二、函数功能的设计和绑定。

1、设计函数,实现赋值和删除的功能。

2、然后在两个button上分别绑定函数:

三、功能演示。

1、设计完成,点击【复制内容】,此时页面展示如下:(两个div内容已相同)。

2、此时点击【删除内容】,展示如下:内容再次被删除,恢复空白。

扩展资料:

HTML DOM innerHTML 属性:

1、定义和用法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

2、语法:tablerowObject.innerHTML=HTML。

操作步骤: 1、打开Dreamweaver软件,然后在创建新项目下选择HTML; 2、点击“文件”选项,然后点击“另存为”,将文件命名为test,并将其保存在电脑桌面上; 3、编写一个基本的html文件,该html文件包含一个用户名及一个密码输入文本框和一个确定以及一个取消按钮; 4、在title标签下插入<script language="JavaScript">js代码</scri... 操作步骤: 1、打开Dreamweaver软件,然后在创建新项目下选择HTML; 2、点击“文件”选项,然后点击“另存为”,将文件命名为test,并将其保存在电脑桌面上; 3、编写一个基本的html文件,该html文件包含一个用户名及一个密码输入文本框和一个确定以及一个取消按钮; 4、在title标签下插入<script language="JavaScript">js代码</script>,然后在html中调用js函数; 5、完成js代码编写及html调用js代码后保存tset.html文件,然后在浏览器中打开test.html文件,检查js代码执行的效果; 6、在Dreamweaver软件中新建一个check.js文件(方法同html文件新建),在check文件中输入校验函数; 7、然后在test.html的title标签下引用check.js文件; 8、在程序中引用check.js文件中的js函数,然后在浏览器中刷新test.hmtl文件,然后在username的输入框中输入非法字符来检验js代码。

1、新建并保存一个html文档,进入html代码编辑页面。

2、写一个input文本输入框,并定义ID,然后写一个按钮,并定义ID。

3、要做的效果就是点击按钮为输入框赋值,然后把输入框和按钮的css样式写好,不写样式也可以。

4、引入jquery文件,路径要正确,写jquery代码,打开浏览器测试一下,点击按钮之后,输入框内就会自动输入赋值的内容。