CODEWITHSUNDEEP
jqueryhtml
divya reddy
divya reddy

Reputation: 139

jQuery- append html using class

I am trying to append html of class and its nested html to another div and only thing available is level-1 for adding elements and nested elements can go upto any level.

When I tried below code, it is not getting appended and throwing below error in console-

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

HTML:

<div class="level-1">
  <div class="level-2">
    <div class="level-3">
  aaaaaaa
      <div class="level-4" style="display:none">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>

        <ul>
      </div>
  </div>

  </div>
   <div class="level-2"></div>
   <div class="level-2"></div>
</div>
<div class="level-1">
  <div class="level-2">
  <div class="level-3">
  bbb
 <div class="level-4" style="display:none">
      <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>

        <ul>
      </div>
   <div class="level-2"></div>
   <div class="level-2"></div>
</div>


   <div id="output"></div>

JS:

$('#output').append($('.level-1'));

Upvotes: 0

Views: 71

Answers (1)

Alex
Alex

Reputation: 4774

You forgot to close some divs.

In this code you have 3 unclosed divs, more exactly the first three.

<div class="level-1">
  <div class="level-2">
  <div class="level-3">
  bbb
 <div class="level-4" style="display:none">
      <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>

        <ul>
      </div>
   <div class="level-2"></div>
   <div class="level-2"></div>
</div>

Upvotes: 1

Related Questions