操纵DOM之--DOM元素的【增删查改】

最新推荐文章于 2023-03-30 10:52:21 发布

执着更专业

最新推荐文章于 2023-03-30 10:52:21 发布

阅读量957

点赞数 1

分类专栏： JavaScript jquery操作DOM Jquery 文章标签： html dom

本文链接：https://blog.youkuaiyun.com/pangchengyong0724/article/details/53189412

版权

JavaScript 同时被 3 个专栏收录

52 篇文章

订阅专栏

Jquery

17 篇文章

订阅专栏

jquery操作DOM

3 篇文章

订阅专栏

修改元素内容

有如下3个方法可以用于获取HTML元素的内容

text()：设置或返回所选元素的文本内容。
html()：设置或返回所选元素的内容（包括HTML 标记）。
val()：设置或返回表单字段的值。

区别：

text和html的明显区别是text只返回元素的文本内容
html返回的是将HTML解析后的内容。
val返回的是表单的内容

获取或设置元素内容示例HTML代码

<html>
 <head></head>
 <style>
 .main{
    font-size:120%;
    color:red;
  }
 </style>
 <body> 

    <p id="test">
        有3个方法可以用于获取<strong>HTML元素</strong>的内容，分别是：<br/>
        <strong>text()：设置或返回所选元素的文本内容</strong><br/>
        <strong>html()：设置或返回所选元素的内容（包括 HTML 标记）</strong><br/>
        <strong>val()：设置或返回表单字段的值</strong><br/>
    </p>

    <textarea name="textvalue" cols="80" rows="5"></textarea> 
    <div> 
        <button id="btn1">显示文本</button> 
        <button id="btn2">显示 HTML</button> 
    </div> 
 </body>
</html>

在HTML中放置了一个id为test的p元素，在段落内部设置了一些HTML代码，在段落下面添加一个textarea元素，用于显示文本的btn1和显示HTML的btn2。接下来对btn1编写代码，使其获取p元素内部的文本内容，并显示到textarea中。btn2将显示HTML内容到textarea元素，这两个按钮的事件处理实现如代码

使用html()和text()获取元素的内容

<script type = "text/javascript" > 
$(document).ready(function(e) {
    $("#btn1").click(function(e) {
        var textStr = $("p").text(); //获取段落的文本内容
        $("#textvalue").text(textStr); //在textarea中显示文本内容
    });
    $("#btn2").click(function(e) {
        var htmlStr = $("#test").html(); //获取段落的HTML内容
        $("#textvalue").text(htmlStr); //在textarea中显示HTML内容
    });
});
</script>

动态创建内容

jQuery还允许开发人员动态地为页面添加内容，类似于JavaScript语言中的CreateElement，jQuery动态创建HTML元素使用工厂函数$()实现
语法如下：

$(html)

其中参数html是要动态创建的HTML标记，它会动态创建一个DOM对象，但是这个DOM对象并没有添加到DOM对象树中，可以使用如下几个jQuery函数来添加到DOM对象树。

append()：在被选元素的结尾插入内容。
prepend()：在被选元素的开头插入内容。
after()：在被选元素之后插入内容。
before()：在被选元素之前插入内容。

在下一小节会介绍这些方法的具体使用，本小节主要关注如何使用工厂方法$()来动态创
建页面元素，举个例子，要向页面中插入一个新的div元素，可以使用如下语句：

$(function(){
    $("<div>", {
        text: "这是动态创建的页面元素",
        click: function(){
            $(this).toggleClass("test"); //设置其toggleClass为test
        }
    }).appendTo("body");
}) //将其添加到body元素中其他元素的后面
//可以看到，在工厂函数$()中不仅可以指定要创建的标签，还可以为其设置各种不同的属性，最后的appendTo将这个新创建的div元素添加到页面

动态插入节点

动态创建的节点如果不插入到DOM对象树中，是不会在页面上呈现的，要动态插入节
点，可以使用如下表

方法名称	方法描述
append()	在被选元素的结尾（仍然在内部）插入指定内容
appendTo()	在被选元素的结尾（仍然在内部）插入指定内容
prepend()	在被选元素的开头（仍位于内部）插入指定内容
prependTo()	在被选元素的开头（仍位于内部）插入指定内容
after()	在被选元素后插入指定的内容
before()	在被选元素前插入指定的内容
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面

append和appendTo以及prepend和prependTo具有相同的描述，它们的不同之处在于内容和选择器的位置。

动态插入节点HTML页面

</head>
<style type="text/css">
body,td,th,input {
font-size: 9pt;
}
</style>
</head>
<body>
    <div id="idbtn">
        <input type="button" name="idAppend" id="idAppend" value="append方法" />&nbsp;
        <input type="button" name="idappendTo" id="idappendTo" value="appendTo方法" />&nbsp;
        <input type="button" name="idpredend" id="idpredend" value="predend方法" />&nbsp;
        <input type="button" name="idpredendTo" id="idpredendTo" value="predendTo方法" />&nbsp;
        <input type="button" name="idbefore" id="idbefore" value="before方法" />&nbsp;
        <input type="button" name="idafter" id="idafter" value="after方法" />&nbsp;
        <input type="button" name="idinsbefore" id="idinsbefore"
value="insertBefore方法" />
&nbsp;
        <input type="button" name="idinsafter" id="idinsafter" value="insertAfter
方法" />
    </div>
    <div id="idcontent">使用不同的按钮，用不同的方法插入页面<br/></div>
</body>

代码中构建了多个不同的按钮，其中每个按钮对应一种不同的插入方法，为每个按钮关
联的事件处理语句如代码

< script type = "text/javascript" > 
$(document).ready(function(e) {
    $("#idAppend").click(function() {
        //追加内容
        $("#idcontent").append("<b>使用append添加元素</b><br/>");
    });
    $("#idappendTo").click(function() {
        //追加内容，语法与append颠倒
        $("<b>使用appendto添加元素</b><br/>").appendTo("#idcontent");
    });
    $("#idpredend").click(function() {
        //插入前置内容
        $("#idcontent").prepend("<b>使用prepend插入前置内容</b><br/>");
    });
    $("#idpredendTo").click(function() {
        //在元素中插入前缀元素，与prepend的操作语法颠倒
        $("<b>欢使用prependTo添加元素</b><br/>").prependTo("#idcontent");
    });
    $("#idbefore").click(function() {
        //在指定元素的前面插入内容
        $("#idcontent").before("<b>使用before添加元素</b><br/>");
    });
    $("#idafter").click(function() {
        //在指定元素的后面插入内容
        $("#idcontent").after("<b>使用after添加元素</b><br/>");
    });
    $("#idinsbefore").click(function() {
        //在指定元素前面插入内容，与before语法颠倒
        $("<b>使用insertBefore添加元素</b><br/>").insertBefore("#idcontent");
    });
    $("#idinsafter").click(function() {
        //在指定元素的后面插入内容，与after的语法颠倒
        $("<b>使用insertAfter添加元素</b><br/>").insertAfter("#idcontent");
    });
}); 
< /script>

动态删除节点

从网页上删除节点也是日常工作中经常遇到的一种操作，jQuery提供了两个可以用来从
DOM元素树中移除节点的方法

remove()方法：用来删除指定的DOM元素，它会将节点从DOM元素树中移除，但是
会返回一个指向DOM元素的引用，因此它并不是真正地将jQuery引用到的元素对象
删除，可以通过这个引用来继续操作元素。
empty()方法：该方法也不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。

remove()方法会将元素从DOM对象树中移除，但是不会把引用了这些对象的jQuery对象删除，因此还可以使用jQuery对象来进行一些操作。
而empty()只是将元素中的内容进行清空

移除元素的HTML页面

<body>
<div id="idwelcome">演示使用remove和empty方法<br/></div>
<div id="idtip"><b>remove方法会从DOM树中移除节点</b><br/></div>
<div id="idsenc"><b>empty方法只是清除元素的内容</b><br/></div>
<div>
    <input name="btnremove" type="button" id="btnremove" value="remove方法" />
    <input name="btnempty" type="button" id="btnempty" value="empty方法" />
</div>
</body>
<!-- 在body区，可以看到有3个div用来显示消息，另外两个div中放置了两个按钮，分别用来
调用remove方法和empty方法-->

< script type = "text/javascript" > 
$(document).ready(function(e) {
    $("#btnremove").click(function() {
        var id1 = $("#idtip").remove(); //移除DOM对象
        $("body").append(id1); //重新添加已被移除的DOM对象
    });
    $("#btnempty").click(function() {
        var id1 = $("#idsenc").empty(); //清除DOM对象
        //重新添加DOM对象的内容
        id1.append("这是重新添加的内容哦，原来的内容已被清除了！");
    });
});
< /script>