html5语言追加append,js和jq的insert以及append添加节点

div#div_one,div#div_two{

width: 300px;

border: 1px solid red;

}

span{

display: block;

}

11111111

22222222

33333333

44444444

55555555

66666666

$(document).ready(function(){

//jQ 部分：

$('#div_one').append('新添加1'); //在元素中最后一个子节点后添加(无子节点就直接添加)

$('新添加2-1').appendTo($('#div_two'));//意义同上

$('新添加2-2').appendTo('#div_two');//此写法也可以

$('新添加3').insertBefore('#span_one'); //向节点前添加兄弟节点

$('新添加4').insertAfter('#span_one'); //向节点后添加兄弟节点

//js 原生部分：

var textnode = document.createTextNode('新添加5'); //以文本格式创建节点

document.getElementById('div_one').appendChild(textnode); //在元素内部最后一个子节点后添加节点(无子节点就直接添加)

var htmlnode = document.createElement('新添加6');

document.getElementById('div_one').appendChild(htmlnode); //在元素内部最后一个子节点后添加节点(无子节点就直接添加)

// var node = document.getElementById("div_one").lastChild; //appendChild也可以用来移动节点

// document.getElementById("div_two").appendChild(node);

});

本文由【waitig】发表在等英博客 本文固定链接：js和jq的insert以及append添加节点 欢迎关注本站官方公众号，每日都有干货分享！

点赞 (0)赏分享 (0)