DOM操作

js动态添加

动态添加标签

var domDiv = document.createElement('div');

动态添加属性

domDiv.setAttribute('id','box');

动态设置内部html标签

domDiv.innerHTML = '<span>动态span</span>'

动态追加到body标签中

document.body.appendChild(domDiv);

---

jq动态添加

动态添加标签

append();

//可以添加jq对象
var $div = $('<p>Hello!</p>');
$(document.body).append($div);
//可以添加字符串
$(document.body).append(('<p>Hi!</p>'));
//可以添加dom对象
var domDiv = document.createElement('p')
domDiv.innerHTML = 'world';
$(document.body).append(domDiv)

动态添加到body标签中

appendTo();

//把div标签加入到父容器-body树中
$("<div><p>Hello!</p></div>").appendTo("body");

动态添加并前置到标签中

.prepend();

添加b并前置到a中
`$(a).prepend(b);`

动态添加并前置到标签中

.prependTo();

添加a到b中
`$(a).prependTo(b);`
***
######在某个标签前面追加(同级增加)
`.before();`

//a的前面追加b
//('div').before('<p>he he</p>');

######在某个标签后面追加(同级插入)
`.after();`

//a的后面追加b
//('div').after('<p>he he</p>');

######插入到某个标签前(同级插入)
`.insertBefore();`

//a的插入到b的前面
//('div').insertBefore('<p>he he</p>');

######在某个标签后面添加标签(同级增加)
`.insertAfter()`

//a的插入到b的后面
//('div').insertAfter('<p>he he</p>');

----
######把某个或每个元素用标签包裹起来
`.wrap();`

$('p').wrap('<div class="ba"></div>');

######把所有的指定元素用标签包裹起来
`.wrapAll();`

$('p').wrapAll('<div class="ba"></div>');

######把标签内的子元素包裹起来
`.wrapInner();`

$('p').wrapInner('<span></span>');

######去掉父容器的包裹
`.unwrap();`

$('p').unwrap('<div class="ba"></div>');

######把元素用html替换掉
`.replaceAll();`

//把满足条件的所有的b替换成a是
//('<div class="1">1</div>').replaceAll('p');

######把元素用html替换掉
`.replaceWith();`

//把a用b来替换
实际就是a->b
$('div').replaceWith('<p class="2">1</p>');

######清空子节点
`.empty();`
######删除自己
`.remove();`
######复制自己
`.clone();`
######阻止事件的默认行为
`e.preventDefault();`
######阻止冒泡事件
`e.stopPropagation();`

('<div class="1">1</div>').replaceAll('p');