# 操作DOM
- 什么是
DOM:Document Object Model缩写,文档对象模型 - 理解页面的树形结构
- 什么是节点:是
DOM结构中最小单元,包括元素、属性、文本、文档等。
# 创建节点
- 创建元素
语法:
document.createElement(name);
var div = document.createElement("div");
document.body.appendChild(div);
@前端进阶之旅: 代码已经复制到剪贴板
$(html):根据传递的标记字符串,创建DOM对象
- 创建文本
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
var $div = = $("<div>DOM</div>");
$(body).append($div);
@前端进阶之旅: 代码已经复制到剪贴板
- 设置属性
- 语法:
setAttrbute(name,value)
- 语法:
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");
var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);
@前端进阶之旅: 代码已经复制到剪贴板
# 插入内容
-
内部插入
-
向元素最后面插入节点:
-
append():向每个匹配的元素内部追加内容 -
appendTo():把所有匹配的元素追加到指定元素集合中,$("A").append("B&
-
-