Javascript创建动态的HTML

Javascript可以通过操作HTML DOM来创建动态的HTML。

Javascript可以改变页面中的所有HTML的元素和其属性
Javascript可以改变页面中的所有CSS样式
Javascript可以对页面中的所有事件做出反应

1、Javascript 通过操作HTML DOM 改变 HTML元素的内容。

1）改变HTML 的输出流。

在Javascript中，document.write()可用于直接向HTML中的输出流写内容。

<script>
document.write(Date());   <!--直接在HTML中输出时间-->
</script>

2）改变HTML的内容。
修改 HTML 内容的最简单的方法是使用innerHTML 属性。

<p id="info">bbbbbbeautiful!</p>    <!--本应该直接输出其中的文本内容-->
<script>
document.getElementById("info").innerHTML="hhhhhhandsome!"; 
</script>
<!--这个时候就只会输出hhhhhhandsome!，标签的内容被修改-->
<!--模板:-->
document.getElementById(id).innerHTML="(新的内容)"；

2、Javascript 通过操作HTML DOM 改变 HTML的样式（改变CSS）

1）改变HTML样式。

<p id="info1">bbbbbbeautiful!</p>
<p id="info2">bbbbbbeautiful!</p>
<script>
document.getElementById("info2").style.color="red";
document.getElementById("info2").style.fontSize="larger";<!--第二个字母大写-->
</script>
<!--模板：-->
document.getElementById(id).style.property="新的样式"

2）HTML DOM 允许我们通过触发事件来执行代码。

<p id="info">bbbbbbbeautiful!</p>
<button type="button" onclick="document.getElementById('info').style.color='red'"> 
点击一下</button>
<!--当用双引号括起来后，里面原来的双引号就得变成单引号-->

3、Javascript通过操作HTML DOM来对HTML 事件作出反应。

1）如果需要在点击某个元素的时候执行代码，就向一个HTML属性中添加Javascript的代码。

<p onclick="this.innerHTML='HHHHHandsome!'">点我看我属性</p>

如何让它连续点击？

扫描二维码关注公众号，回复： 4885796 查看本文章

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>连续点击</title>
<script>
var i=0；
		function change(){
		x=document.getElementById("info");
		if(i==0)x.innerHTML="我想和你结婚";
		else if(i==1) x.innerHTML="做炽热的亲吻";
		else if(i==2) x.innerHTML="我想和你在这";
		else if(i==3) x.innerHTML="开始私定终身";
		else if(i==4) x.innerHTML="香槟塔前";
		else if(i==5) x.innerHTML="许下的心愿";
		i++;
	}
</script>
</head>
<body>
<button onclick="change()">啦啦啦！</button>
<p id="info"></p>
</body>
</html>

这是通过button按钮来控制，当然也可以直接对标签进行控制。

<script>
var i=0;
	function change(id){
		if(i==0)id.innerHTML="我想和你结婚";
		else if(i==1) id.innerHTML="做炽热的亲吻";
		else if(i==2) id.innerHTML="我想和你在这";
		else if(i==3) id.innerHTML="开始私定终身";
		else if(i==4) id.innerHTML="香槟塔前";
		else if(i==5) id.innerHTML="许下的心愿";
		i++;
	}
</script>
<p onclick="change(this)">啦啦啦！</p>

以上是直接点击文本来变化。

Javascript创建动态的HTML

猜你喜欢