CODEWITHSUNDEEP
javascriptjquerydom
Philip Tenn
Philip Tenn

Reputation: 6073

JavaScript appendChild for element not working

I am attempting to use JavaScript to dynamically append child elements (li elements) into an existing list.

Target DOM:

<body>
  <div class="dd" name="agenda-nestable" id="nestable">
    <ol id="agenda-root" class="dd-list">
      <li class="dd-item" id="2879">
        <div class="dd-handle">Section123</div>
      </li>
      <li class="dd-item" id="2880">
        <div class="dd-handle">Section 4</div>
      </li>
      <li class="dd-item" id="2881">
        <div class="dd-handle">Section 5</div>
      </li>
    </ol>
  </div>
  <button value onclick='addSection()'>Add Section</button>
</body>

JavaScript:

function addSection() {
  var data = { SectionId: 123, SectionText: 'Section Name'};
  var agendaDiv = $("[name='agenda-nestable']");
  var agendaSections = $(agendaDiv).find("ol#agenda-root");
  agendaSections.appendChild('<li class="dd-item" data-id="' + data.SectionId + '" id="' + data.SectionId + '">' +
      '<div class="dd-handle">' + data.SectionText + "</div></li>");
}

Plunk: https://plnkr.co/edit/jLi9epblNAtMbzezcRSY?p=preview

Could someone please take a look and let me know what I am doing wrong? It seems like it should be straightforward, and I believe I am traversing the DOM correctly. :-/

Thanks,

Philip

Upvotes: 1

Views: 365

Answers (4)

DDan
DDan

Reputation: 8276

Change your generateRemoveSectionDropDown method code to this:

function generateRemoveSectionDropDown() {
    $("#nestable ol#agenda-root>li").each( function() {
       $('#RemoveSectionId').append($('<option>', {text: $(this).text() }));
    });
}

And add to your html this:

<select id="RemoveSectionId"></select>

It will work well.

See plunk.

Upvotes: 0

Ry-
Ry-

Reputation: 224859

appendChild isn’t a jQuery function; it’s part of the DOM API, and you can only use it on DOM nodes. jQuery objects aren’t DOM nodes. There’s no reason to be manipulating HTML in the first place, though, when you can create an actual <li> element:

agendaSections.append(
    $('<li>', {
        class: "dd-item",
        'data-id': data.SectionId,
        id: data.SectionId,
    }).append(
        $('<div>', { class: 'dd-handle', text: data.SectionText })
    )
);

This also prevents HTML injection if SectionText is user-provided data.

Upvotes: 3

Gianpaulo
Gianpaulo

Reputation: 332

The method appendChild is from native js. agendaSections is a jQuery element, so you need to use append() method from jQuery.

Upvotes: 1

Nick Tsai
Nick Tsai

Reputation: 4129

Try to replace appendChild() to append():

JSfiddle Demo

function addSection() {
  var data = { SectionId: 123, SectionText: 'Section Name'};
  var agendaDiv = $("[name='agenda-nestable']");
  var agendaSections = $(agendaDiv).find("ol#agenda-root");
  agendaSections.append('<li class="dd-item" data-id="' + data.SectionId + '" id="' + data.SectionId + '">' +
      '<div class="dd-handle">' + data.SectionText + "</div></li>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="dd" name="agenda-nestable" id="nestable">
    <ol id="agenda-root" class="dd-list">
      <li class="dd-item" id="2879">
        <div class="dd-handle">Section123</div>
      </li>
      <li class="dd-item" id="2880">
        <div class="dd-handle">Section 4</div>
      </li>
      <li class="dd-item" id="2881">
        <div class="dd-handle">Section 5</div>
      </li>
    </ol>
  </div>
  <button value onclick='addSection()'>Add Section</button>
</body>

Upvotes: 2

Related Questions