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

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 移动到该元素。

var $banner = $('#banner');

if ($banner.length) {
  $banner.append($('.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>

Answer 2

这个没测试过，但是这段代码会找到'banner'分区，如果存在的话，找到页面的h1，去掉，附加到banner分区。

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

Relevant JSFiddle

Answer 3

我建议避免在这个简单的任务中使用 jQuery，这里是 @Michael Coker 使用 vanilla JavaScript 的示例。

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。

这是从 answer 借来的方法的 jQuery 源代码：

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

Answer 4

好的，这个怎么解决？只需按照以下步骤操作：

1. 使用$('#banner').length检查id为banner的元素是否存在
2. 如果#banner 存在，则检查元素内是否有任何h1 元素，类为.page
3. 如果 h1 存在，则使用 $('#banner').append($('.page h1'));将 h1 移动到横幅元素。

代码

$(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'));
    }
}

});

<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>

注意： 您应该使用唯一 id 引用 h1 元素，因为如果您只是使用 $('h1') 它可能与提供的代码一起工作，但如果您在 div 中添加更多 h1 元素（带有类页面），那么它将移动所有这些 h1 元素到横幅元素。