element.nextElementSibling is not returning the right element

Question

I'm using CKEditor 5 to create a text-rich editor on each textarea that has the class .section-dynamique-fr.

The editor is indeed appended to my html page.

Now, when I try to access the editor via javascript using e.nextElementSibling, it does not return its nextElementSibling as seen in the node tree from the console inspector, instead it returns e.nextElementSibling.nextElementSibling.

Any idea why I can't access e.nextElementSibling? (the div with the class .ck-editor) ?

See attached image for html node structure

document.querySelectorAll('.section-dynamique-fr').forEach( (e) => {

    ClassicEditor
        .create( document.querySelector('#' + e.id), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            window.editor = editor;
            thisEditor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

    console.log(e); //This gives me the textarea
    console.log(e.nextElementSibling); //This should gives me the div with class ck-editor but instead gives me the div with class .textarea-saved-content-fr

Please click [edit](https://stackoverflow.com/posts/55261911/edit) and then `[<>]` snippet editor and create a [mcve] instead of posting pictures of HTML — mplungjan, Mar 20 '19 at 13:32
I figured it would be easier since I needed the CKEditor.js file to generate the correct html. Do I need to edit even if it was marked as duplicate? — oehaut, Mar 20 '19 at 13:45

score 2 · Accepted Answer · answered Mar 20 '19 at 13:36

This is because editor did not create after create execution. you need replace you code to thencallback. callback is a Promise and it will be resolve after editor fully created. See documentaion

document.querySelectorAll('.section-dynamique-fr').forEach( (e) => {

    ClassicEditor
        .create( document.querySelector('#' + e.id), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            window.editor = editor;
            thisEditor = editor;
            console.log(e.nextElementSibling);
        } )
        .catch( err => {
            console.error( err.stack );
        } );

element.nextElementSibling is not returning the right element

1 Answers1