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

最新推荐文章于 2024-05-16 04:23:10 发布

YinghaoGuo

最新推荐文章于 2024-05-16 04:23:10 发布

阅读量1.1w

点赞数 2

分类专栏： javascript篇文章标签： javascript jquery append after before

本文链接：https://blog.csdn.net/qq_22855325/article/details/70926881

版权

javascript篇专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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>

结果如下：

YinghaoGuo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js和jq的insert/append/after/before添加节点和文本

$('#div_one').append('新添加1'); //在元素中最后一个子节点后添加（无子节点就直接添加） $('新添加2-1').appendTo($('#div_one'));//意义同上 $('新添加2-2').appendTo('#div_one');//此写法也可以 $('新添加3').insertBefore('#span_on
复制链接

扫一扫