js和jq的insert/append/after/before添加节点和文本

来源：互联网发布：图像算法工程师待遇编辑：程序博客网时间：2024/06/05 15:30

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>

结果如下：

2 0