添加、删除元素

最新推荐文章于 2022-07-18 09:33:34 发布
最新推荐文章于 2022-07-18 09:33:34 发布
阅读量624 收藏 1
点赞数
分类专栏： JavaScript+jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qhairen/article/details/47089683
版权

1、如何动态的创建html元素

1.动态的添加到document文档中

基本步骤：

1）       创建元素(createElement)

2）       给新的元素添加必要的信息

3） 将元素添加到指定的位置（appendChild），比如div body

<scriptlanguage="javascript">

function test(){

//创建元素

//写希望创建的元素的标签名字

varmyElement=document.createElement("a");

var myElement2=document.createElement("input");

//给新的元素添加必要的信息

myElement.href="http://www.baidu.com";

myElement.innerText="连接到百度";

myElement.id="id1";

myElement2.type="button";

myElement2.value="我是按钮";

//可以指定位置

/*myElement.style.left="200px";

myElement.style.top="300px";

myElement.style.position="absolute";

//将元素添加到document.body上去

document.body.appendChild(myElement);*/

//将元素添加到div上去

document.getElementById("div").appendChild(myElement);

document.getElementById("div").appendChild(myElement2);

}

</script>

 

2.动态的删除document文档中的元素(removeChild)

function test2(){

 //删除一个元素(删除一个元素的是有前提的：必须获得父元素)

 //这是第一种方法(不灵活)

 //document.getElementById("div").removeChild(document.getElementById("id1"));

 //第二种方法比较灵活（推荐）这种方法不知道父元素id也能获得父元素

//window.alert(document.getElementById("id1").parentNode.id);//测试可以返回父元素id

          document.getElementById("id1").parentNode.removeChild(document.getElementById("id1")); 

 }

<body>

<inputtype="button" value="动态的创建一个超链接"οnclick="test()"/>

<inputtype="button" value="删除一个元素id为id1的"οnclick="test2()"/>

<divid="div" style="width:200px;height:400px; border:1px solidred;">div</div>

</body>

SurgeOfLove
关注
专栏目录
详解vue添加删除元素的方法
08-27
vue添加删除元素的方法 Vue.js 是一个流行的前端框架，用于构建用户界面和单页应用程序。在 Vue 中，添加和删除元素是非常常见的操作。下面我们将详细介绍 Vue 中添加和删除元素的方法。 添加元素 在 Vue 中，...
JS 添加删除元素的实现代码
01-21
在讨论JavaScript添加和删除元素的实现时，首先需要了解的是，JavaScript是一种运行在浏览器中的脚本语言，它使得网页具有交互性和动态效果。在HTML文档对象模型（DOM）中，可以通过JavaScript轻松地添加、删除或...
【vue】利用vue实现元素增删查
Evan_QB的博客
05-08 624
首先引入vue&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;body部分如下: 给每一个li绑定一个id，这样删除就删除指定的id即可&lt;body&gt; &lt;div id="app"&gt; &lt;input type="text&quot
【HTML DOM】关于直接删改操作body标签中子元素的问题
weixin_45602529的博客
08-30 1190
在想要删除<body>中直接的一级父元素时，给body标签添加id名并进行如下操作： <...> <body id="body"> <div id="div1"> </div> <script> var test=document.getElementById("body"); var child=document.getElementByid("div1"); body.removeChild(child); </scrip
php dom 子元素,php – 如何使用DOMDocument删除body元素的所有子元素？
weixin_39550587的博客
03-22 244
我正在尝试使用DOMDocument删除所有正文孩子.$dom = new DomDocument();$dom->loadHTML($buffer);$dom->preserveWhiteSpace = FALSE;$body = $dom->getElementsByTagName('body')->item(0);$bodyChilden = $body->ch...
JS小Demo: 点击Body 创建DIV, 点击DIV删除
nanquan的专栏
05-16 392
给小朋友做的演示 三个兼容主流浏览器的公共方法 addEvent removeEvent stopEventPropagation &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt...
移除元素
dianlu5775的博客
06-07 132
方法 说明 remove() 从DOM中移除匹配的元素及其所有后代和文本节点。 detach() 从DOM中移除匹配的元素及其所有后代和文本节点。还会在内存中保留副本。通常使用remove()方法。 empty() 从DOM中移除匹配元素子节点及后代。 unwrap() 移除匹配结果的父节点，并保留匹配元素。 ...
JQuery给元素添加/删除节点比如select
12-04
在本篇文章中，我们将探讨如何使用 jQuery 来操作 HTML 中的 `<select>` 元素，包括获取选中项的文本、值和索引，以及添加和删除 `<select>` 的 `<option>` 节点。 首先，我们来看如何获取 `<select>` 元素中选中的...
jQuery动态添加、删除元素的方法
10-26
在Web开发中，动态地添加或删除页面元素是一项常用功能。随着用户交互，我们可能需要向页面中添加新的内容，或者移除已经不再需要的内容。使用jQuery库，可以简化这些操作。本篇文章将介绍如何使用jQuery动态地向...
JS学习-16.删除元素的方法
qq_37974765的博客
11-16 1007
删除子级元素 removeChild 删除自身元素 remove <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>删除子级元素</title> </head> <body>
创建标签、添加元素、删除元素
CHENww_的博客
10-24 279
一、创建元素（createElement） HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点: <div class="box"> <h3>标题文本</h3> <p>正文文本</p> <input type="text" id="userName" name="userName"> <input type="button" value=
创建，添加，插入和删除DOM元素
小芳
07-30 1552
创建DOM元素：createElement("节点");
【DOM】DOM操作之如何添加、删除、替换元素_04
青春木鱼的博客
05-19 7226
本文将详细介绍如何使用DOM操作添加、删除、替换元素。我们使用document.createElement("标签名")来创建元素，使用父元素.removeChild(子元素)来删除子元素。另外，用createElement创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！因此，今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。
document.createElemet创建的元素怎么删除
qq_36350876的博客
11-25 2747
document.createElemet创建的元素怎么删除
html添加删除元素,添加删除元素
weixin_39851809的博客
06-15 561
无标题文档Hello World!我可以被删除!在我上下添加一个元素吧！
javascript删除html结点操作
蜗牛学习笔记
03-06 9126
html页面上删除结点的操作跟添加结点中将段落添加在指定依附点之前相似，将段落添加在指定依附点之前代码为document.body.insertBefore(newGraf, docForm),删除的为document.body.removeChild(deleteNode) 就可以了。使用的是removeChild 方法，删除的是body域里面的元素。
DOM之元素的 创建+添加+删除+克隆
weixin_47075145的博客
07-18 2898
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。
DOM基础之删除元素
ch_musk的博客
06-30 4037
在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素。 语法： A.removeChild(B); 说明： A表示父元素，B表示父元素内部的某个子元素。 举例： <!DOCTYPE > <html> <head> <title ></title&gt...
级联菜单和销毁元素 document.body.removeChild(img);
goodyatou的专栏
04-24 9599
    New Document                var arr = new Array(2);   arr[0] = new Array("ACCP-S1","ACCP-S2","ACCP-Y2");   arr[1] = new Array("BENET-S1","BENET-S2");   function chg(){    var s1 = document.getEl
list 迭代器添加删除元素
最新发布
12-21
在Python中，列表（list）是一种序列容器，它允许在序列中的任意位置进行常数时间的插入和删除操作，并可以...为了避免这个问题，你可以创建一个新的列表来存储要删除或添加的元素，然后在迭代结束后再进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值