JavaScript 添加新元素
2024-08-30 23:58:14
JavaScript 添加新元素
版权声明:未经授权,严禁转载!
添加元素
创建元素
使用 JS 可以为一个已有的元素添加一个新的子元素。
第一步:创建空元素。
- var elem = document.createElement("标签名");
- 创建元素后,可以像使用 DOM 树中的任意元素一样,为此元素添加属性或内容。
- elem.id = "xxx";
- elem.innerHTML = "xxx";
注意:元素创建完成后,只是在内存中保存,并没有添加到 DOM 树。
第二步:将新创建的元素添加到 DOM 树的指定父元素下。
- 在父元素末尾追加:parent.appendChild(elem);
- 添加到某个子元素之前:parent.insertBefore(a,child);
- 替换某个子元素:parent.replaceChild(a,child);
JS 优化建议:尽量少的操作 DOM 树,同时添加父元素及其子元素的时候,先在内存中将子元素创建完毕并拼到父元素中,再一次性将父元素添加到页面。
删除一个子元素
- parent.removeChild(child);
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">
<p id="p1">我是第一个P元素</p>
<p id="p2">我是第二个P元素</p>
<p id="p3">我是第三个P元素</p>
</div> <div id="d2">
<h3>标题一</h3>
<p>我是一个段落</p>
</div> <select id="sel">
</select> <script>
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
var p3=document.getElementById("p3");
var sel=document.getElementById("sel");
//1.创建一个空元素
var a=document.createElement("a");
//设置关键属性和内容
a.href="http://www.baidu.com";
a.innerHTML="百度一下";
console.log(a);
//2.将元素添加到DOM树的指定父元素下
d1.appendChild(a);//在末尾追加
// d1.insertBefore(a,p2);//将a插入到p2之前
// d1.replaceChild(a,p1);//用a替换p1元素 //删除一个子元素
d1.removeChild(p3);//删除d1下的p3元素 //练习1:
//在P1之前添加一个h1标记
//1.创建空元素
var h1=document.createElement("h1");
h1.innerHTML="我是新添加的标题";
//2.将元素添加到DOM树
d1.insertBefore(h1,p1); //练习2:
//在d2的末尾,添加一个列表ul
var ul=document.createElement("ul");
d2.appendChild(ul);
//再在ul中添加两个li,内容分别为“北京”和“上海”
for(var i=0;i<2;i++){
var li=document.createElement("li");
li.innerHTML=i==0?"北京":"上海";
ul.appendChild(li);
} //练习3:
var city=["北京","上海","天津","重庆","深圳","武汉"];
//在select中添加option,内容分别为city数组中的城市
for(var i=0;i<city.length;i++){
var option=document.createElement("option");
option.innerHTML=city[i];
option.value=city[i];
sel.appendChild(option);
} </script>
最新文章
- jQuery 下拉框应用 拓展
- 敏捷遇上UML-需求分析及软件设计最佳实践(郑州站 2014-6-7)
- 【tomcat ecplise】新下载一个tomcat,无法成功启动,或者启动了无法访问localhost:8080页面/ecplise无法添加新的tomcat/ecplise启动tomcat启动不起来
- Linux系统重启python程序
- c语言运算符号的优先级
- Java基础集锦——利用Collections.sort方法对list排序
- SQl中drop与truncate的区别
- apache http server 局域网无法访问
- e2e 自动化集成测试 环境搭建 Node.js Selenium WebDriverIO Mocha Node-Inspector
- sharepoint 2013创建外部内容类型并创建外部列表
- hdu_5750_Dertouzos(线性筛)
- 详解 RestTemplate 操作
- mysql 如何查看sql语句执行时间和效率
- Nginx 用分片提示缓存效率
- 支付宝电脑支付沙箱配置(JAVA)
- 【LeetCode每天一题】Swap Nodes in Pairs
- 使用vim编程步骤
- Linux第二章读书笔记
- OpenGL学习--02--绘制一个红色三角形
- C语言:返回两个数组中第一个元素的指针,并输出这个值