0

I want to append some data after an element in my markup for which I am using after() method. My json is as below (in a separate file)-

The problem is, it reverses the order of items and display them as 3 2 1 instead of 1 2 3! Can anyone please help me understand why and how can I fix this?

const data = [{
  "testData": {
    "one": "1",
    "two": "2",
    "three": "three"
  }
}]


const json = data[0].testData;

for (const key in json) {
  var listItem = `<div><p>${key}</p><p>${json[key]}</p></div>`;
  $("hr").after(listItem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>SAMPLE</h2>
<hr>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
HarshVardhan Bandta
  • 129
  • 7
  • Use append `$("hr").append(listItem);` – mplungjan Sep 22 '20 at 17:48
  • @mplungjan If you inspect the markup it will get appended inside the
    and the markup will render as

    .I want the structure to look like

    . If I prepend() then the order works properly. I don't understand this behavior.     – HarshVardhan Bandta Sep 22 '20 at 17:57
  • Read the dupe and experiment. Also [RTM](https://api.jquery.com/append/), [RTM](https://api.jquery.com/prepend/),[RTM](https://api.jquery.com/after/), [RTM](https://api.jquery.com/before/), – mplungjan Sep 22 '20 at 17:59
  • I mean before() sorry not prepend(). I have tried all these methods. That is why I posted this query. I simply want the div to be added AFTER the hr tag ( and not inside it) . – HarshVardhan Bandta Sep 22 '20 at 18:07

0 Answers0