【JavaScript入门经典】第七版-13练习

最新推荐文章于 2024-07-14 15:54:59 发布

桑莱

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量352

点赞数

分类专栏： JavaScript入门经典第七版练习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44786382/article/details/123162231

版权

JavaScript入门经典第七版练习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

13练习
尝试编写一个insertAfter()方法，使用与insertBefore()类似的参数，形式如同insertAfter(newNode, targetNode)。（提示：使用insertBefore()方法和nextSibling属性。）

13_1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document 13-1</title>
	<script src="13_menu.js"></script>
	<script type="text/javascript">
		window.onload=makeMenu;
	</script>
</head>
<body>
	<h1 id="one">总标题</h1>
	<h2>这里是第一个</h2>
	<p>第一个段落有111111111111111111111111111111</p>
	<h2>这里是第二个</h2>
	<p>第二个段落有222222222222222222222222222222</p>
	<h2>这里是第三个</h2>
	<p>第三个段落有333333333333333333333333333333</p>
</body>
</html>

13_menu.js

 function insertAfter(newE, tarE){
	var trueT=tarE.nextSibling;
	document.body.insertBefore(newE,trueT);
}

function makeMenu(){
	var h2s=document.getElementsByTagName("h2");
	var menu=document.createElement("div");
	var menuUl=document.createElement("ul");
	menu.appendChild(menuUl);

	for(var i=0;i<h2s.length;i++){
		var itemText=h2s[i].childNodes[0].nodeValue;
		var menuLi=document.createElement("li");
		menuUl.appendChild(menuLi);

		var menuLiA=document.createElement("a");
		menuLiA=menuLi.appendChild(menuLiA);
		menuLiA.setAttribute("href","#item"+i);
		var menuText=document.createTextNode(itemText);
		menuLiA.appendChild(menuText);    

		var anc=document.createElement("a");
		anc.setAttribute("name","item"+i);
		document.body.insertBefore(anc,h2s[i]);
	}
	//document.body.insertBefore(menu,document.body.firstChild);

	insertAfter(menu,document.getElementById("one"));
}