d3.js可以一边增加标签一边删除标签吗

d3.js可以一边增加标签一边删除标签吗,第1张

这是不可以的。在 body 中 id 为 myid 的元素前添加一个段落元素。

body.insert("p","#myid")

.text("insert p element")

已经指定了 Pear 段落的 id 为 myid,因此结果如下。

Apple 

insert p element 

Pear 

Banana

删除元素使用 remove,例如:

var p = body.select("#myid")

p.remove()

如此即可删除指定 id 的段落元素。

思路:

添加:往页面类型是button的input 标签

删除:通过input标签查找所有添加的按钮,移除其中一个

代码示例:

<script>

function add(){

   var buttons = document.getElementById('buttons')

   buttons.innerHTML += ("<input type='button' value='新1'/>")

}

function del(){   

   var buttons = document.getElementById('buttons')

   var inputs =buttons.getElementsByTagName('input')

   if(inputs.length>0){

      inputs[0].remove()

   }

}

</script>

</head>

<body>

<div id='buttons'>

</div>

<input type='button' value='添加' onclick='add()'/>

<input type='button' value='删除' onclick='del()'/>

</body>

1、新建一个html文件,命名为test.html,在test.html文件内,在div标签内,使用p标签创建多行文字。

2、在test.html文件内,设置指定标签的id属性,例如,这里设置第二个p标签的id为testpp,主要用于下面通过该id获得p对象。

3、在test.html文件内,使用button标签创建一个按钮,按钮名称为“去掉指定标签内容”。

4、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行clearcon()函数。

5、在js标签中,创建clearcon()函数,在函数内,使用getElementById()方法通过id(testpp)获得标签对象,将其innerHTML属性设置为空,便可实现删除标签的内容。

6、在浏览器打开test.html文件,点击按钮,查看实现的效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11827686.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存