Using jquery, I have been able to successfully create a list by using the following code: $(list).append(item); (where list is the list reference and item consists of the $('<li>') elements being added).
var item = $('<li>')
$(item).append('Some Data').append('some more data');
$(list).append(item);
The list is generated in the format below, which has been working well:
<ul>
<li>Some data, and some more Data from the 'list' var</li>
<li>Some data, and some more Data from the 'list' var</li>
<li>Some data, and some more Data from the 'list' var</li>
<li>Some data, and some more Data from the 'list' var</li>
</ul>
Now, I want to enhance the appearance of this list with some css. I am looking to wrap different tags around elements within the list but I am having trouble with the syntax.
My desired outcome is as follows:
<ul>
<li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
<li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
<li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
<li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
<li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
</ul>
I have attempted to manually add the tags using methods like + “<div>” and + “</div>” but it seems to close the tags simultaneously (resulting in <div></div>). I have also tried using .append(“<div>”) at specific points in the string with similar outcomes. Additionally, using .wrap() caused the text to disappear completely, indicating a syntax error.
Could someone provide guidance on the best approach to achieve my desired result?