12--Jquery中的DOM操作(替换节点)

  1. replaceWith():将所匹配的元素都替换为指定HTML或DOM元素
    实例1:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>替换节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*新建一个元素*/
            var $jz=$("<li title='jz'>桔子</li>");
            /*查找节点*/
            var $li=$("li:eq(1)");
            /*替换节点*/
            $li.replaceWith($jz);
        })
    </script>
</body>
</html>
  1. replaceAll():颠倒了repalceWith()方法。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>替换节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*新建一个元素*/
            var $jz=$("<li title='jz'>桔子1</li>");
            /*查找节点*/
            var $li=$("li:eq(1)");
            /*替换节点*/
            $jz.replaceAll($li);
        })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qwy715229258163/article/details/113875999