用JavaScript往DIV动态添加内容

简介: 参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hpOeOadBxC2rWWGuhZPbms-K 要填充的数据为: 这是一个测试例子.

参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hpOeOadBxC2rWWGuhZPbms-K

<div id="show"></div>
要填充的数据为: 这是一个测试例子.
jquery:
$(function(){
var data = '这是一个测试例子';
$('div:#show').html(data);
});

js:
var data = '这是一个测试例子';
document.getElementById('show').innerHTML = data;


我做的案例:
脚本:

<script type="text/javascript">
function show(string)
{
    var content=document.getElementById("content");
    content.innerHTML=string;
}
</script>

content是div的ID号。

前台:

<input id="Button2" type="button" value="button" onclick="return show('hello world!')" />

 1 <html>
 2     <head>
 3         <title>test page</title>
 4         <script type="text/javascript">
 5             function show(string)
 6             {
 7                 //var data = '这是一个测试例子';
 8                 document.getElementById('show').innerHTML = string;
 9             }
10         </script>
11     </head>
12     <body>
13         <a href="javascript:void(0)" onclick="show('hello world!')">打开</a>
14         <div id="show"></div>
15     </body>
16 </html>
View Code

 

 

 

相关文章
|
7月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
127 0
|
JavaScript 前端开发
javascript动态添加删除表格
javascript动态添加删除表格
|
2月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
71 5
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
55 3
|
6月前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
93 1
|
7月前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
70 3
|
7月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
72 0
|
7月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
73 0