你的位置:首页 > Java教程

[Java教程]jquery操作DOM 元素


.after()
  在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。
  .after(content[,content])
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
  .after(function)
    function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
  结构:
    <div >
      <h2>Greetings</h2>
      <div >Hello</div>
      <div >Goodbye</div>
    </div>
    $('.inner').after('<p>Test</p>');
  效果:
    <div >
      <h2>Greetings</h2>
      <div >Hello</div>
      <p>Test</p>
      <div >Goodbye</div>
      <p>Test</p>
    </div>


.before()
  根据参数设定,在匹配参数的前面插入插入内容。
  .after(content[,content])
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
  .after(function)
    function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
  结构:
    <div >
      <h2>Greetings</h2>
      <div >Hello</div>
      <div >Goodbye</div>
    </div>
    $('.inner').before('<p>Test</p>');
  效果:
    <div >
      <h2>Greetings</h2>
      <p>Test</p>
      <div >Hello</div>
      <p>Test</p>
      <div >Goodbye</div>
    </div>


.insertAfter()
  在目标元素的后面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
  .insertAfter(target)
    target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标后面。
  结构:
    <div >
      <h2>Greetings</h2>
      <div >Hello</div>
      <div >Goodbye</div>
    </div>
    $("<p>Test</p>").insertAfter('.insertAfter');
  效果:
    <div >
      <h2>Greetings</h2>
      <div >Hello</div>
      <p>Test</p>
      <div >Goodbye</div>
      <p>Test</p>
    </div>

 

.insertBefore()
  在目标元素的前面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
  .insertBefore(target)
      target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标前面。
  结构:
    <div >
      <h2>Greetings</h2>
      <div >Hello</div>
      <div >Goodbye</div>
    </div>
    $("<p>Test</p>").insertBefore('.insertAfter');
  效果:
    <div >
      <h2>Greetings</h2>
      <p>Test</p>
      <div >Hello</div>
      <p>Test</p>
      <div >Goodbye</div>
  </div>