make the focus on a particular div after button click

Question

I am having a form in a page for registering various entertainment programs on a particular stage. After submitting all the details and clicking on submit button, it should check whether a program exists on that stage on the particular day. If any program exists, a div should show the existing program with the full details.My issue is that if any program exists, i need to make the focus on that newly generated div (I mean that div should be visible,no editing is required). I need it because, div is generated with the help of AJAX and the form is so lengthy, so user cannot see the div generated, unless he/she scrolls upward. NB:The div is created in the top position. Is there any way to make the div portion to be visible after form submitting

Answer 1

Regularly, you can not focus a div. But if you will add a tabindex to it, it will work:

<div tabindex="0">test </div>

Here is a demo:

.z{margin-top:800px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="$('.z')[0].focus()" value="test" />
<div>
    <div class="z" tabindex="0">test </div>
</div>

If you click on test button div should became focused and jump into view. On click I just do something like divElement.focus()

Another option is just to scroll area which contains your newly added div, like in other answers here.