<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改 DOM 树结构</title>
</head>
<body>
<!-- 请在index.js文件中完成练习 -->
<div>
<div id="tree1">
<p class="text">保留的段落元素</p>
<p class="detail">保留的段落元素</p>
<p class="etc">需要被删除的段落元素</p>
</div>
</div>
<!-- 引入jQuery-->
<script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
<script>
/*
* 根据题目文档示意图，修改 DOM 树结构
* 1、去除ID为 "tree1" 的元素其带有类名为 "etc" 的子元素 p
* 2、给 ID为 "tree1" 的 div 元素增加一个兄弟元素 div，该兄弟元素 ID 为 "tree2"
* 3、为 ID 为 "tree2" 的 div 元素增加子元素 div, 该子元素带有类名 "item";
*/
// 去除ID为 "tree1" 的元素其带有类名为 "etc" 的子元素 p
$('#tree1 .etc').remove();
// 给 ID为 "tree1" 的 div 元素增加一个兄弟元素 div，该兄弟元素 ID 为 "tree2"
$('#tree1').after('<div id="tree2">div#tree2</div>');
// 为 ID 为 "tree2" 的 div 元素增加子元素 div, 该子元素带有类名 "item";
$('#tree2').append('<div class="item">tree2 子元素</div>');
</script>
</body>
</html>
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
