How to set child's contenteditable property without affecting the parent element?

Question

I came across this weird issue with contenteditable DIVs, I have a parent div whose contenteditable property is set to true, And in a button click event I'm trying to append a div with contenteditable='false' to this parent div. The problem is that when i just do that, the parent element become uneditable. (There is no problem with the child - which is of course, uneditable). I searched the web and tried to figure this problem out, but still have no clue what the problem actually is.

This is my code:

Html:

<div id="parent" contenteditable="true"></div>

jQuery (on button click):

$("#parent").append
(
    "<div style=\"position: relative; display: block;\" contenteditable=\"false\">" +
        "<img src=\"...\"/>" +
    "</div>"
);

When the above jQuery code is executed, the #parent div became uneditable, like (contenteditable = false). Why is that? Is there something wrong with this code? Is there any other way to prevent the child from affecting the parent?

I read many many articles that says that this is the correct way of making a child of contenteditable div uneditable, and i know this even without reading them. I have a lot of experience dealing with contenteditable elements, and it is the first time I'm facing this problem.

(This code is currently tested only on Firefox, Since it is the main browser I'm targeting, But there is no reason that this code will behave differently on other browsers).

Thanks a lot for reading this question, Any helpful ideas will be appreciated and upvoted. Thank you.

Answer 1

$("#parent > div").prop("contenteditable", "false");

Use this for select child div