jq方法：
使用jq方法添加节点及文本会容易一些：
$('#div_one').append('<span>新添加1</span>'); //在元素中最后一个子节点后添加（无子节点就直接添加）
$('<span>新添加2-1</span>').appendTo($('#div_one')); //意义同上
$('<span>新添加2-2</span>').appendTo('#div_one'); //此写法也可以
$('<span>新添加3</span>').insertBefore('#span_one'); //向节点前添加兄弟节点
$('<span>新添加4</span>').insertAfter('#span_one'); //向节点后添加兄弟节点
$(".span-one").before("<p>Hello world，before span-one!</p>"); //向每个class=span-one的节点前添加节点$(".span-one").after("<p>Hello world，after span-one!</p>"); //向每个class=span-one的节点后添加节点
js部分：
var htmlnode = document.createElement('book'); //命名节点为book(只能定义节点名称，不能在节点中添加内容)
document.getElementById('div_two').appendChild(htmlnode); //在元素内部最后一个子节点后添加节点<book></book>（无子节点就直接添加）
var textnode = document.createTextNode('<span>新添加5</span>'); //以文本格式创建节点（注意这里的<span>会被当做文本，而不是html标签）
document.getElementById('div_two').getElementsByTagName('book')[0].appendChild(textnode); //在元素内部最后一个子节点后添加节点（无子节点就直接添加）
var node = document.getElementById("div_one").lastChild; //appendChild也可以用来移动节点
document.getElementById("div_two").appendChild(node);
document.getElementById('div_two').innerHTML = document.getElementById('div_two').innerHTML + '<span>新添加6</span>'; //以html形式添加标签及内容
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
div#div_one,div#div_two{
width: 300px;
border: 1px solid red;
}
span{
display: block;
}
</style>
</head>
<body>
<div id="div_one">
<span id="span_one">11111111</span>
<span id="span_two">22222222</span>
<span id="span_three">33333333</span>
</div>
<div id="div_two">
<span>44444444</span>
<span>55555555</span>
<span>66666666</span>
</div>
<span class="span-one">1</span>
<span class="span-one">2</span>
<span class="span-one">3</span>
<script>
$(document).ready(function(){
/* toogle()
toogleClass();*/
//jQ 部分：
$('#div_one').append('<span>新添加1</span>'); //在元素中最后一个子节点后添加（无子节点就直接添加）
$('<span>新添加2-1</span>').appendTo($('#div_one'));//意义同上
$('<span>新添加2-2</span>').appendTo('#div_one');//此写法也可以
$('<span>新添加3</span>').insertBefore('#span_one'); //向节点前添加兄弟节点
$('<span>新添加4</span>').insertAfter('#span_one'); //向节点后添加兄弟节点
$(".span-one").before("<p>Hello world，before span-one!</p>"); //向每个class=span-one的节点前添加节点
$(".span-one").after("<p>Hello world，after span-one!</p>"); //向每个class=span-one的节点后添加节点
//js 原生部分：
var htmlnode = document.createElement('book'); //命名节点为book(只能定义节点名称，不能在节点中添加内容)
document.getElementById('div_two').appendChild(htmlnode); //在元素内部最后一个子节点后添加节点<book></book>（无子节点就直接添加）
var textnode = document.createTextNode('<span>新添加5</span>'); //以文本格式创建节点（注意这里的<span>会被当做文本，而不是html标签） document.getElementById('div_two').getElementsByTagName('book')[0].appendChild(textnode); //在元素内部最后一个子节点后添加节点（无子节点就直接添加）
var node = document.getElementById("div_one").lastChild; //appendChild也可以用来移动节点 document.getElementById("div_two").appendChild(node);
document.getElementById('div_two').innerHTML = document.getElementById('div_two').innerHTML + '<span>新添加6</span>'; //以html形式添加标签及内容
});
</script>
</body>
</html>
结果如下：
