[学习笔记]_js以及jQuery动态创建节点及节点属性设置等操作

  1. js与jQuery动态创建节点、设置属性并添加至DOM
  • js 插入子节点
<body>
    <div id="container">
        <div class="div0">本来存在于页面的div</div>
    </div>
</body>
<script type="text/javascript">
    var cparent = document.getElementById("container");
    var cdiv1 = document.createElement("div");
    corderItembox.className = "div1";
    //在父节点容器结尾处添加
    cparent.appendChild(cdiv1);
 </script>
  • jQuery
    1.创建节点
    创建文本节点:$("<div>直接将文本的内容添加进去</div>");
    创建节点并给节点添加属性:
var div = $("<div class='div2'><div class='text'>jquery动态创建DIV元素节点</div></div>")

2.将节点添加到文档DOM中

  • 2.1 添加至dom内部(作为子节点)

append()
appendTo()
tip:两种方法功能相同——它们都将被插入到目标容器的末尾。主要的不同是语法——内容和目标的书写位置不同

<body>
    <h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>
    <div id="content"></div>
    <script type="text/javascript">         
        $("#bt1").on('click', function() {           
            //.append(), 内容在方法的后面,参数是将要插入的内容。
            $("#content").append('<div class="append">通过append方法添加的元素</div>');
        })     
    </script>     
    <script type="text/javascript">
                $("#bt2").on('click', function() {            
                    //.appendTo()刚好相反,内容在方法前面            
                    //无论是一个选择器表达式 或创建作为标记上的标记都将被插入到目标容器的末尾  
                    $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"));
                })
    </script>
</body>

prepend()
prependTo()
tip:在指定元素的开头处插入新的节点:

<script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div节点,然后通过prepend在内部的首位置添加一个新的p节点
        $('.aaron1').prepend('<p>prepend增加的p元素</p>');
    })   
</script>   
<script type="text/javascript">   
    $("#bt2").on('click', function() {       
        //找到class="aaron2"的div节点,然后通过prependTo内部的首位置添加一个新的p节点       
        $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'));
    })   
</script>
  • 2.2 添加至dom外部(作为兄弟节点)
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容
    tip:以上两个方法都支持同时插入多个元素
<script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>');
    })    
</script>
    <script type="text/javascript">
        $("#bt2").on('click', function() {
            //在匹配test1元素集合中的每个元素后面插入p元素
            $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>');
        }) 
</script>

insertAfter()
insertBefore()
tip:以上方法都不支持多参数,当有参数时只有第一个参数被执行

<body>
    <h2>通过insertBefore与insertAfter添加元素</h2>
    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>
    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">测试insertBefore,不支持多参数</p>
    </div>
    <div class="aaron">
        <p class="test2">测试insertAfter,不支持多参数</p>
    </div>    
    <script type="text/javascript">
        $("#bt1").on('click', function() {
            //在test1元素前后插入集合中每个匹配的元素,不支持多参数
            $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"));
        })  
    </script>
    <script type="text/javascript">    
        $("#bt2").on('click', function() {
            //在test2元素前后插入集合中每个匹配的元素,不支持多参数
                $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"));
        })    
    </script>
</body>
  1. empty()–将选定节点的内容清空
$("#divid").empty();
  1. remove()—DOM节点删除
$(".className").remove();

总结:

  • jQuery相对于js的优势在于: jQuery的代码比较简单; 创建节点时给节点添加属性和文字时更加方便灵活; 插入节点位置更加灵活。
  • 在循环添加节点时,需要将每次遍历后创建得到的子节点以及父节点存于变量中让其会根据遍历的次数不同发生变化,否则会出现第二次遍历得到的子节点被放置于第一次遍历创建的父节点下,导致页面混乱。

学习参考:
博客园
CSDN论坛

发布了25 篇原创文章 · 获赞 2 · 访问量 6635
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览