jQuery .html() Function

Question

The following code creates li from div's but the divs still appear in the source, what have I missed?:

 $(document).ready(function(){
   var makeLI = $("div").html("<li class='blue'>" +
    "Here is a new &lt;li &gt; element.</li>");

    $("body").append("<ul>");

    $("ul").append(makeLI);
  });

A publication states:

Navigate to the file in your browser. The elements are converted to elements with the text we want displayed.

However in FF 6 the div's remain:

<div><li class="blue">Here is a new &lt;li &gt; element.</li></div>

------------------Complete Code------------------

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 <style>
  .blue { color:blue; }
  </style>
</head>
<body>
<h1>Rewriting three &lt;div&gt; elements</h1>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

 $(document).ready(function(){
   var makeLI = $("div").html("<li class='blue'>" +
    "Here is a new &lt;li &gt; element.</li>");


    $("body").append("<ul>");

    $("ul").append(makeLI);
  });

is it ONLY in FF 6? it's not finished software, maybe it's because of that if it's ONLY in 6. — Can Poyrazoğlu
– Can Poyrazoğlu, Commented Aug 21, 2011 at 18:50

Felix Kling · Accepted Answer · 2011-08-21 18:57:53Z

2

makeLI is the div element. The li is a child of it. Of course if you append the div somewhere it will be there. If you only want to append the li element, you have to call children:

$("ul").append(makeLI.children());

Or simply omit the div:

$('body').append($("<ul />").append("<li class='blue'>" +
"Here is a new &lt;li &gt; element.</li>"));

Btw. the div will be there in all browsers. You might not see it, because browsers tend to correct invalid HTML. A div element inside a ul element is not valid and it will probably be moved after the ul. Nevertheless, you should create valid HTML.

edited Aug 21, 2011 at 18:57

answered Aug 21, 2011 at 18:52

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Baldur · Accepted Answer · 2011-08-21 18:53:06Z

1

You are creating that div in the $("div") skip that and you should be set

var $li = $("<li>");
$li.html("Here is a new &lt;li &gt; element.");
$li.addClass('blue');

answered Aug 21, 2011 at 18:53

Baldur

4414 silver badges6 bronze badges

Collectives™ on Stack Overflow

jQuery .html() Function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related