I am currently working on a project that requires me to clone span.response11, attach it to #parent, and then insert a new div into the cloned span.response11. I have successfully completed the cloning process, but I am facing an issue where my IF statement keeps adding the new div to elements that already have it appended.
For reference, here is a fiddle with my jQuery code: https://jsfiddle.net/4bmwbkgx/2/
// if this cloned element doesn't already have the child div.red, append it.
$("#parent > span").each(function(index, element) {
if ($(element).not(":has(.red)")) {
$(element).prepend('<div class="red">This is red</div>');
}
});
I want the div.red to be added only once. If span.response already contains div.red as a child, the jQuery script should not add any more divs.
How can I modify my function to prevent additional divs from being added?