版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
插入元素
插入元素主要有两个函数
- append():在选择集末尾插入元素
- insert():在选择集前面插入元素
append( )
<p id="First">First</p>
<p id="Second">Second</p>
<p id="Third">Third</p>
<!-- append() -->
<script>
var p = d3.select("body").append("p").text("appden a demo");
</script>
insert( )
<p id="First">First</p>
<p id="Second">Second</p>
<p id="Third">Third</p>
<!-- append() -->
<script>
var p = d3.select("body").insert("p","#Second").text("insert a demo");
</script>
删除元素
- remove()
<p id="First">First</p>
<p id="Second">Second</p>
<p id="Third">Third</p>
<!-- 删除元素 remove() 指定元素ID即可删除元素 -->
<script>
var p = d3.select("#Second").remove();
</script>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The Fourth</title>
</head>
<script src="../../JS/d3.min.js"></script>
<body>
<!-- 插入元素、删除元素 -->
<!-- 插入元素涉及的函数有两个
append():在选择集末尾插入元素
insert():在选择集前面插入元素-->
<p id="First">First</p>
<p id="Second">Second</p>
<p id="Third">Third</p>
<!-- append() -->
<!-- <script>
var p = d3.select("body").append("p").text("appden a demo");
</script> -->
<!-- insert() -->
<!-- <script>
var p = d3.select("body").insert("p","#Second").text("insert a demo");
</script> -->
<!-- 删除元素 remove() 指定元素ID即可删除元素 -->
<script>
var p = d3.select("#Second").remove();
</script>
</body>
</html>