i have started using jQuery recently and have bumped into a problem. in a function, i use the .html() method as a substitute to innerHTML (which from what i’ve seen in the documentation, isn’t wrong), but for some reason when i try to check the value i’m setting, it gives me undefined. here’s my code:
let nuevo_producto = $("li").html(() => { return "<input class='marcar-comprado' type='checkbox'/><span class='producto'>" + nombre + "</span><img class='icono-borrar' src='img/delete-icon.png' alt='Borrar'>"});
console.log(nuevo_producto.html())<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>>Solution :
Right now you are selecting actual DOM element <li>.
If you want to create virtual element, you should pass not selector, but it’s content:
let nombre = 'Product 1';
let nuevo_producto = $("<li>").html(() => { return "<input class='marcar-comprado' type='checkbox'/><span class='producto'>" + nombre + "</span><img class='icono-borrar' src='img/delete-icon.png' alt='Borrar'>"});
console.log(nuevo_producto.html())<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>