jQuery .focus doesn’t actually focus a newly created element

Question

Let’s say I have this markup:

<div id="content">
  <div id="firstP"><p>First paragraph</p></div>
  <div id="secondP"><p>Second paragraph</p></div>
  <div id="thirdP"><p>Third paragraph</p></div>
  <div id="fourthP"><p>Fourth paragraph</p></div>
</div>

I want to add a new <div> with jQuery and focus on this new element. .focus does not do anything.

function addParagraph() {
  var html = "<div id=\"newP\"><p>New paragraph</p></div>";

  $("#content").append(html);
  $("#newP").focus();    
}

Any idea why?

Answer 1

I think the main answer is incorrect. DIV and P tags can receive focus providing you specify a tabindex property for them. i.e.

<div class="someclass" tabindex="100">

Once the tabindex is specified you can either tab to these elements or shift focus with .focus() .

Using a scrollTo plugin seems like a bit of an overkill here.

Answer 2

There's no problem with your code, it's just that a paragraph or div tag can't receive focus. Focus can only be given to things you can interact with, such as links, input elements, textareas, etc.

To scroll the window to this newly added element, you can use a plugin such as ScrollTo.

On a side note, your code could be simplified a bit:

var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$("#content").append(html);
$("#newP p").focus();

var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$(html)
    .appendTo('#content')
    .focus()   // or scrollTo(), now...
;