html - overriding parent contentEditable with javascript -

i have div this:

<div id="op" contenteditable="true">hello<div class="dynamic">......sth </div> <div class="dynamic"> ...sth </div> .......<div class="dynamic"> </div>.. <div class="dynamic"> </div>..</div> 

the divs inside div id "op" created dynamically , appended "op" appendchild method. after dynamic divs added, need change contenteditable of div "op" false while divs inside of "op" true. basically, being said, target able modify divs true contenteditable appended div false contenteditable.i did this:

document.getelementbyid("op").setattribute("contenteditable",false); document.getelementsbyclassname("dynamic").setattribute("contenteditable",true); 

this not work , think reason simple. although modified contenteditable of "dynamic" class divs, still inside div has false contenteditable.

is there way override parent contenteditable property such allows child retain own contenteditable whenever has 1 , applies parent content editable otherwise?

are setting contenteditable attribute false or true divs class "dynamic"? in snippet you're setting of divs false.

the default value contenteditable (when missing) inherit. when set element's contenteditable true, children of element content editable.

given following html can edit of text , accidentally remove child div:

<div id="parent" contenteditable="true">     parent div     <div id="child"><!-- contenteditable="true" implied -->         child div     </div> </div> 

and html can edit text "parent div":

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