append li to table td using javascript/jquery

Question

I want to append ul ol to td, i tried for a few tags h3, it's working but I do the same for ul ol the data is mismatching within table format, as I am new to javascript any help would be appreciated. Thank you in advance. Below is my code. Also, I'm unable to add the library version in the snippet. Please help

 var h2data = document.getElementsByClassName('carname'); var title_array=[]; for(var i=0; i< h2data.length; i++){ title_array.push(h2data[i].innerText); } console.log(title_array); var pdata_detail = document.getElementsByClassName('car_details'); var pdata_array=[]; for(var i=0; i< pdata_detail.length; i++){ pdata_array.push(pdata_detail[i].innerText); } console.log(pdata_array); var dscdata = document.getElementsByClassName('features'); var desc_array=[]; for(var i=0; i< dscdata.length; i++){ desc_array.push(dscdata[i].innerText); } console.log(desc_array); var soldes = document.getElementsByClassName('feature_detail'); var soldetail_array=[]; for(var i=0; i< soldes.length; i++){ soldetail_array.push(soldes[i].innerText); } console.log(soldetail_array);

 <h1>List of cars</h1> <h2 class="carname">BMW</h2> <h3 class="car_details">Manuf Details</h3> <ul> <li> <p>Top 10 Most Popular Car Features </p> </li> <li> <p>Touchscreen infotainment system </p> </li> <li> <p>Music System.</p> </li> <li> <p>Panoramic Sunroof.</p> </li> <li> <p>Music System</p> </li> <li> <p>LED DRLs.</p> </li> </ul> <h3 class="features">good features:</h3> <p class="feature_detail">Fast USB Charging Outlets & Wireless Charger.</p> <h2 class="carname">Brimstone</h2> <h3 class="car_details">Manuf Details:</h3> <ul> <li> <p>Front Bumper</p> </li> <li> <p>Fender</p> </li> </ul> <h3> Areas:</h3> <ul> <li> <p>Rear Bumper</p> </li> <li> <p>Grille</p> </li> </ul> <h2 class="carname">Smoke</h2> <h3 class="car_details">Manuf Details</h3> <p class="">dec 2021</p> <ol start="1"> <li> <p>The darkest of smokes emitted from the exhaust </p> </li> <li> <p>The spark at ignition can only combust a certain amount</p> </li> <li> <p>conditions can be caused by a leaking fuel injector</p> </li> <li> <p>only will this constrict the volume of air</p> </li> <li> <p>Blueish hue can be found from cars</p> </li> </ol> <p>Head gasket failure types:</p> <ol start="1"> <li> <p>Compression leaks to crankcase smoking </p> </li> <li> <p>Blown to outside oil leak</p> </li> <li> <p>Blown to outside coolant leak.</p> </li> <li> <p>Compression leak to coolant overheating.</p> </li> </ol> <h3 class="features">good Feature:</h3> <p class="feature_detail">Exhaust products that make it to the outside world can vary in colour,. </p> <button onclick="addTable()">Click me</button>

Answer 1

Consider the following jQuery example.

 $(function() { function getCarDetails() { var results = []; var car; $(".carname").each(function(i, el) { car = { carname: $(el).text(), pname: $(el).siblings(".car_details").eq(i).text(), desc: $(el).siblings(".features").eq(i).text(), soldetail: $(el).siblings(".feature_detail").eq(i).text(), } results.push(car); }); return results; } $("button").click(function(event) { var myData = getCarDetails(); console.log(myData); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>List of cars</h1> <h2 class="carname">BMW</h2> <h3 class="car_details">Manuf Details</h3> <ul> <li> <p>Top 10 Most Popular Car Features </p> </li> <li> <p>Touchscreen infotainment system </p> </li> <li> <p>Music System.</p> </li> <li> <p>Panoramic Sunroof.</p> </li> <li> <p>Music System</p> </li> <li> <p>LED DRLs.</p> </li> </ul> <h3 class="features">good features:</h3> <p class="feature_detail">Fast USB Charging Outlets & Wireless Charger.</p> <h2 class="carname">Brimstone</h2> <h3 class="car_details">Manuf Details:</h3> <ul> <li> <p>Front Bumper</p> </li> <li> <p>Fender</p> </li> </ul> <h3> Areas:</h3> <ul> <li> <p>Rear Bumper</p> </li> <li> <p>Grille</p> </li> </ul> <h2 class="carname">Smoke</h2> <h3 class="car_details">Manuf Details</h3> <p class="">dec 2021</p> <ol start="1"> <li> <p>The darkest of smokes emitted from the exhaust </p> </li> <li> <p>The spark at ignition can only combust a certain amount</p> </li> <li> <p>conditions can be caused by a leaking fuel injector</p> </li> <li> <p>only will this constrict the volume of air</p> </li> <li> <p>Blueish hue can be found from cars</p> </li> </ol> <p>Head gasket failure types:</p> <ol start="1"> <li> <p>Compression leaks to crankcase smoking </p> </li> <li> <p>Blown to outside oil leak</p> </li> <li> <p>Blown to outside coolant leak.</p> </li> <li> <p>Compression leak to coolant overheating.</p> </li> </ol> <h3 class="features">good Feature:</h3> <p class="feature_detail">Exhaust products that make it to the outside world can vary in colour,. </p> <button>Click me</button>

This results in giving you an Array of Objects:

[
  {
    "carname": "BMW",
    "pname": "Manuf Details",
    "desc": "good features:",
    "soldetail": "Fast USB Charging Outlets & Wireless Charger."
  },
  {
    "carname": "Brimstone",
    "pname": "Manuf Details:",
    "desc": "good Feature:",
    "soldetail": "Exhaust products that make it to the outside world can vary in colour,. "
  },
  {
    "carname": "Smoke",
    "pname": "Manuf Details",
    "desc": "",
    "soldetail": ""
  }
]

As you tagged this question with jQuery, I am using the jQuery Framework for ease of use. You can do similar with JavaScript itself.

The basics of this is ti iterate over each Elements with the Class of carname and use this as point of reference to the other elements. You can then use .text() to get the Text from the element.

See More:

• https://api.jquery.com/each/
• https://api.jquery.com/siblings/
• https://api.jquery.com/text/