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