No sé cómo usar jQuery en absoluto y realmente necesito ayuda. Esto es lo que estoy tratando de hacer... 
Necesito agregar esas etiquetas junto a aquellas sin codificar el texto en el HTML. Soy muy nuevo en jQuery y realmente me encantaría recibir ayuda.
HTML
jQuery (Esto es de un tutorial)
$("document").ready(function(){ $("body").append("<p>JSQuery Hello World"); }); window.addEventListener("DOMContentLoaded", function(evt) { var elem = document.getElementsByTagName("body")[0]; var para = document.createElement("p"); var text = document.createTextNode("This is regular JS"); para.appendChild(text); elem.appendChild(para); });Código de solución
<script src="your jquery src"></script> <ul id="productList"> <li data-type="family">Coffee</li> <li data-type="child">Tea</li> <li data-type="family">Milk</li> <li data-type="child">Milk</li> <li data-type="family">Milk</li> </ul> <script> $(document).ready(function () { var listItems = $("#productList li"); listItems.each(function (idx, li) { var product = $(li); product.append(" - <b> ("+product.attr('data-type')+") </b>"); // and the rest of your code }); }); </script>Explicación y lógica:
li en #productlist y guárdelo en listItemsproduct , agregue el valor de la propiedad de datos usando la función jquery append()Tenga en cuenta: si no se define ningún atributo de datos, se imprimirá indefinido en lugar de valor. Para resolver este error, puede agregar una condición if en cada ciclo y luego agregar.