If element exists on page, find h1 and place inside found element

Question

Is there a way to check if a div element exists on a page and if it does to then find the h1 of that page, remove it from where it is, and add it instead inside of the found div element? Example:

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

If the top banner doesn't exist then the page would need to remain the same.

Answer 1

Using jquery, check for the existence of the element, then use $.append() to move the h1 to that element.

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

Okay how to solve this one? Simple follow these steps:

1. Check whether the element with id banner exist or not using $('#banner').length
2. If #banner exists check whether there is any h1 element within element with class .page
3. If h1 exists use $('#banner').append($('.page h1')); to move the h1 to banner element.

Code

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

Note: you should refer to the h1 element with a unique id, because if you simply use $('h1') it may work fine with the provided code but if you add more h1 elements within the div (with class page) then it will move all of those h1 elements to the banner element.

Answer 3

This hasn't been tested, but this code will find the 'banner' division, and if it exists, find the h1 of the page, remove it, and append it to the banner division.

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

Relevant JSFiddle

Answer 4

I would recommend avoiding the use of jQuery for this simple task, here's @Michael Coker example with 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>

---

Further explanation:

jQuery append() method performs several extra validations which you do not really need before using the appendChild DOM method.

Your <h1> element will always be of type 1 (Node.ELEMENT_NODE), you can check the nodeTypes here.

Here's the method's jQuery Source borrowed from this answer:

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