Question

有没有办法检查页面上是否存在div元素，如果它确实找到该页面的h1，将其从原来的位置删除，并将其添加到找到的div元素中？例如：

<div id="banner">
<!---find if this div exists first--->
</div>

<div class="page">
<h1>Then find this and add it instead to above banner</h1>
</div>

如果顶部横幅不存在，则页面需要保持不变。

Answer 1

使用jquery检查元素是否存在，然后使用$.append()将h1移动到该元素。

＆＃13;

var $banner = $('#banner');

if ($banner.length) {
  $banner.append($('.page h1'));
}

＆＃13;

#banner h1 {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
<!---find if this div exists first--->
</div>

<div class="page">
<h1>Then find this and add it instead to above banner</h1>
</div>

＆＃13;

Answer 2

好的，如何解决这个问题？简单地按照以下步骤操作：

使用$（＆＃39;＃banner＆＃39;）检查带有id横幅的元素是否存在.length
如果#banner存在，请检查元素中是否有任何带有类.page
如果h1存在，请使用$（＆＃39;＃banner＆＃39;）。追加（$（＆＃39; .page h1＆＃39;））;将h1移动到banner元素。

<强>代码

＆＃13;

$(document).ready(function(){
//checking if the element with #banner id exists or not
if ($('#banner').length)
{
    //checking h1 element exists or not
    if ($('h1').length)
    {
        // if h1 exists, add it to the end of #banner element
        $('#banner').append($('.page h1'));
    }
}

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner" style='color:orange;'>
<!---find if this div exists first--->
</div>

<div class="page">
<h1>Then find this and add it instead to above banner</h1>
</div>

＆＃13;

注意：你应该引用具有唯一ID的h1元素，因为如果你只是使用$（＆＃39; h1＆＃39;）它可以与提供的代码一起工作，但是如果你在div中添加更多的h1元素（使用类页面））然后它会将所有这些h1元素移动到banner元素。

Answer 3

这尚未经过测试，但此代码会找到“banner”分区，如果存在，请找到页面的h1，将其删除，然后将其附加到横幅部分。

var banner = $('#banner');
if (banner) {
    var h1 = $('h1').get(0);
    $(h1).remove();
    $('#banner').append(h1);
}

Relevant JSFiddle

Answer 4

我建议避免使用jQuery来完成这个简单的任务，这里是带有vanilla JavaScript的@Michael Coker示例。

var banner = document.getElementById('banner');

if (banner) {
  banner.appendChild(document.querySelector('.page h1'));
}

#banner h1 {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
  <!---find if this div exists first--->
</div>

<div class="page">
  <h1>Then find this and add it instead to above banner</h1>
</div>

进一步说明：

jQuery append()方法在使用appendChild DOM方法之前执行了一些您不需要的额外验证。

您的<h1>元素将始终为1类型Node.ELEMENT_NODE），您可以检查nodeTypes here。

这是方法的jQuery Source，借用了这个answer：

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
}

如果页面上存在元素，请找到h1并放置在找到的元素内

4 个答案:

进一步说明：