zoukankan      html  css  js  c++  java
  • DOM操作方法的简单归纳

    1. 要在HTML中创建新元素,使用$()函数
    2. 要在每个匹配的元素中插入新元素,使用:
      • .append()
      • .appendTo()
      • .prepend()
      • .prependTo()
    3. 要在每个匹配的元素相邻的位置上插入新元素,使用:
      • .after()
      • .insertAfter()
      • .before()
      • .insertBefore()
    4. 要在每个匹配的元素外部插入新元素,使用:
      • .wrap()
      • .wrapAll()
      • .wrapInner()
        1、$("li").wrap("<div></div>");
        
        每一个选择器都添加
        
        <ul>
        
        <div><li title="苹果">苹果</li></div>
        
        <div><li title="橘子">橘子</li></div>
        
        <div><li title="菠萝">菠萝</li></div>
        
        </ul>
        
        2、$("li").wrapAll("<div></div>");
        
        在所有选中的选择器最外面添加
        
        <ul>
        
        <div>
        
        <li title="苹果">苹果</li>
        
        <li title="橘子">橘子</li>
        
        <li title="菠萝">菠萝</li>
        
        </div>
        
        </ul>
        
        3、$("li").wrapInner("<div></div>");
        
        为选择器的内容添加
        
        <ul>
        
        <li title='苹果'><div>苹果</div></li>
        
        <li title='橘子'><div>橘子</div></li>
        
        <li title='菠萝'><div>菠萝</div></li>
        
        </ul>
    5. 要用新元素或文本替换每个匹配的元素,使用:
      • .html()
      • .text()
      • .replaceAll()
      • .replaceWith()
    6. 要移除每个匹配的元素中的元素,使用:
      • .empty()
    7. 要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:
      • .remove()
      • .detach()
  • 相关阅读:
    HTML导航条的制作
    图片样式加hover特效
    用表格制作商品购买页面--(table)
    CSS-盒子模型
    一些常见css样式加选择器
    css的一些样式
    HTML基本代码
    element-ui的tab切换同步步骤条 字符串转数字 数字转字符串
    vuex相关知识笔记
    js: 数组方法(中级)
  • 原文地址:https://www.cnblogs.com/pfr-blog/p/6645604.html
Copyright © 2011-2022 走看看