I have some menus i have to append on click and so far i have had to remove most spaces and also place every html code i want to append in a single line.
My html looks like this
<ol class='list-group main_list' style='height:400px; overflow-y:scroll'>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Cars
</div>
</div>
</li>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Buses & Microbuses
</div>
</div>
</li>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Heavy Equipment
</div>
</div>
</li>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Motorcycles & Scooters
</div>
</div>
</li>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Trucks & Trailers
</div>
</div>
</li>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Vehicle Parts & Accessories
</div>
</div>
</li>
<li class='list-group-item list-group-item-action' id='vehicles'>
<div class='row'>
<div class='col-3 mr-3'>
<img src='assets/greencar.svg' class='uploading_image' />
</div>
<div class='col-8 mt-3'>
Watercraft & Boats
</div>
</div>
</li>
</ol>
After removing spaces and placing all code in a single line
$( "#vehicles" ).on( "click", function() {
//remove main_list //append into list_section
$("#main_list").remove();
$("#list_section").append("<ol class='list-group main_list' style='height:400px; overflow-y:scroll'><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /></div><div class='col-8 mt-3'>Cars</div></div></li><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /></div><div class='col-8 mt-3'>Buses & Microbuses</div></div></li><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /></div><div class='col-8 mt-3'> Heavy Equipment</div></div> </li><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /></div><div class='col-8 mt-3'>Motorcycles & Scooters</div></div></li><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /></div><div class='col-8 mt-3'> Trucks & Trailers</div></div></li><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /></div><div class='col-8 mt-3'>Vehicle Parts & Accessories</div></div></li><li class='list-group-item list-group-item-action' id='vehicles'><div class='row'><div class='col-3 mr-3'><img src='assets/greencar.svg' class='uploading_image' /> </div><div class='col-8 mt-3'>Watercraft & Boats</div></div></li></ol>");
});
Is there a method i can use to be able to append the same html without having the code in a single line and removing lots of spaces since its time consuming and code becomes unreadable.
