Why doesn't creating DIV element using JQuery work?

Question

I am trying to create a div element with class and append a child it. But I am not getting any response. What might be the reason?

JS content

function createTable() {
var procDiv = $("<div class='proc-container'></div>");
var procUl = $("<ul></ul>")
for (var i = 0; i < 3; i++) {
    var li = $("<li></li>")
    li.innerText = "P" + i;
    procUl.appendChild(li);
}
procDiv.appendChild(procUl);

$(".container").get(0).appendChild(procDiv);

}

index.html

<html lang="en">
<head>
    <title>Title</title>
    <script src="jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <script src="ga.js"></script>
</head>
<body onload="createTable(1,1,1)">
<div class="container">
</div>
</body>
</html>

guest271314 · Accepted Answer · 2016-05-04 23:09:10Z

2

li jQuery object does not have .innerText property; procUL jQuery object does not have .appendChild() method. Substitute using jQuery objects for DOM elements; .text() for .innerText, .append() for .appendChild()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  function createTable() {
    var procDiv = $("<div class='proc-container'></div>");
    var procUl = $("<ul></ul>")
    for (var i = 0; i < 3; i++) {
      var li = $("<li></li>")
      li.text("P" + i);
      procUl.append(li);
    }
    procDiv.append(procUl);
    $(".container").append(procDiv);
  }
</script>

<body onload="createTable()">
  <div class="container">
  </div>
</body>

answered May 4, 2016 at 23:09

guest271314

1

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

1 Comment

Ali Tor Over a year ago

Thank you so much. Such simple beginner mistakes always exist.

SimianAngel · Accepted Answer · 2016-05-04 23:09:19Z

1

Your proc variables are being assigned jQuery objects. Consider using jQuery's .append() method.

$(".container").append(procDiv);

answered May 4, 2016 at 23:09

SimianAngel

62910 silver badges14 bronze badges

1 Comment

guest271314 Over a year ago

At first glance presumed that li.innerText = "P" + i would log an error at console, though appears to set the property at the jQuery li object, though not at DOM element <li> .innerText property

Collectives™ on Stack Overflow

Why doesn't creating DIV element using JQuery work?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related