JavaScript学习笔记 操作DOM --2020-04-19

操作DOM
在这里插入图片描述

<body>
<span>开始</span>
<div id="box" title="标题" class="bbb">
	<p>测试Div1</p>
	<p>测试Div2</p>
	<p>测试Div3</p>
</div>
</body>
<script>
		document.write("<h1>你好</h1>");
		document.write("<h1>你坏</h1>");
		document.write("<h1>你好坏</h1>");
		//获得div id为box的标签
		var box1=document.getElementById("box");
		console.log(box);
		//向页面中添加新节点 分两步
		//1.在内存中创建DOM结点   createElement
		var p1=document.createElement("p");
		//2.将内存中的DOM结点添加到页面中   appendChild
		//box.appendChild(p);
		//在内存中创建文本结点  createTextNode
		var p1text=document.createTextNode("测试Div4");
		p1.appendChild(p1text);
		box.appendChild(p1);
		var p2=document.createElement("p");
		var p2text=document.createTextNode("测试Div5");
		p2.appendChild(p2text);
		box1.insertBefore(p2,box1.firstChild);//insertBefore()函数要用父节点去调用,p2插入到box1.firstChild前面
</script>

代码结果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值