【问题标题】:Change position of tags in the DOM更改 DOM 中标签的位置
【发布时间】:2011-12-20 02:08:24
【问题描述】:
<p>I like turtles</p>
<h3>Child brags about stuff</h3>
<h4>The Herd</h4>

如何更改标签的位置(顺序)?

到这里:

<h3>Child brags about stuff</h3>
<p>I like turtles</p>
<h4>The Herd</h4>

有没有 JQuery 的可能性?

【问题讨论】:

    标签: javascript jquery html dom dom-manipulation


    【解决方案1】:

    使用.detach().insertAfter() jQuery 方法,像这样:

    $(function() {
       $('p').detach().insertAfter('h3'); 
    });
    

    jsFiddle 证明。

    【讨论】:

      【解决方案2】:

      使用 jQuery:

      $('h3').after($('p'));
      

      另见我的jsfiddle

      【讨论】:

      • 我忘记了 .after() 移动元素,如果它已经在 DOM 中。简洁明了。
      【解决方案3】:

      如果变量h3elem 中有h3pelem 中的p(随心所欲地获取它们 - jQuery、getElementByIdgetElementsByTagName 或其他任何东西),请使用:

      h3elem.parentNode.insertBefore(h3elem, pelem);
      

      这会将h3 移动到p 之前。

      【讨论】:

        【解决方案4】:

        下面的代码会在&lt;p&gt;标签之前插入&lt;h3&gt;标签,你可以给它们分配一个id来唯一标识它们。

        $('h3').insertBefore($('p'));

        【讨论】:

          【解决方案5】:
          function doWorks(){
          
              var h3 = $("h3");
          
              h3.remove();
          
              h3.insertBefore("p");
          
          
          }
          

          【讨论】:

          • 为什么不在第二行使用h3变量?
          猜你喜欢
          • 2014-05-24
          • 1970-01-01
          • 2020-12-05
          • 1970-01-01
          • 2016-07-02
          • 1970-01-01
          • 1970-01-01
          • 2017-02-17
          • 1970-01-01
          相关资源
          最近更新 更多