CODEWITHSUNDEEP
javascriptjqueryappend
JasonDAquila
JasonDAquila

Reputation: 88

When does jQuery .append() act like .insertBefore() last child vs. as documented?

http://jsfiddle.net/foaje732/2/ HTML source:

<p id="words">Words
    <p>
        <label>Q1
            <input type="text" id="q1" name="myinput" />
        </label>
    </p>
</p>

Jscript:

$('#words').append($('<p></p>').html("This is clearly in the wrong place."));

What you actually get:

Words.
This is clearly in the wrong place.
Q1 [input field]

Upvotes: 0

Views: 96

Answers (2)

Kai
Kai

Reputation: 3663

We cannot get any child <element> inside p element, the $('#words').children() will return 0 so that it append your code at the top of p ( after words -text, not any element). In this case if you want to fix it, try change p to div:

<div id="words">
    <p>Words</p>
    <p>
        <label>Q1
            <input type="text" id="q1" name="myinput" />
        </label>
    </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).ready(function(){
   $('#words').append($('<p></p>').html("This is clearly in the wrong place."));
})

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It is because your mark up is wrong, the p element cannot contain another block element, it can contain only inline elements. So the actual html rendered by your markup in the browser will be as below, which makes your output correct.

<p id="words">Words</p>
<p>
    <label>Q1
        <input type="text" id="q1" name="myinput">
    </label>
</p>
<p></p>

So one possible solution you can look for is to use div as the external container like

$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="words">Words
  <div>
    <label>Q1
      <input type="text" id="q1" name="myinput" />
    </label>
  </div>
</div>

Upvotes: 1

Related Questions