DOM操作之--元素的创建,添加,删除

简介:

在页面创建元素

 
var t1 = document.createElement( "h1" );
t1.textContent = "这是通过js设置的标题" ;
document.body.appendChild(t1);
  // createElement创建一个元素对象,参数是要创建的元素名字,返回值是创建的元素对象
// 元素对象,appendChild方法表示为这个元素添加一个子元素,参数是要添加的子元素对象,被添加的子元素会排列在最后



创建ul与li
 
var ul = document.getElementById( "list" );
var l1 = document.createElement( "li" );
l1.textContent = "这里添加一个li" ;
ul.appendChild(l1);

 
插入元素
// 为元素对象添加一个子元素,插入到另一个元素之前,第一个参数表示要添加的元素对象,第二个元素表示添加在谁之前
ul.insertBefore(li, li2);



删除元素

// 元素对象.remove方法:从DOM对象中删除这个元素
// ul.remove();
 
// 删除元素对象的某个子元素
document.body.removeChild(ul);
目录
相关文章
|
29天前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
29天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
16天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
16 0
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
4天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
8天前
|
JavaScript 前端开发
N..
|
25天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
13 1
|
30天前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
30天前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0