How to programmatically add elements to a region.

I noticed that if I append an element to a region programmatically using jquery’s prepend() that element is not focusable or editable. I assume this is because ContentTools is unaware of the new DOM elements. How should I be alerting ContentTools about the additions to the DOM? Is there a better way to append/prepend?

[anthonyjb]

@bcreeves sorry completely missed this, not sure how. So yes what you’d ideally do is add a ContentEdit element to the ContentEdit region rather than a DOM element. For example:

var p = new ContentEdit.Text('p', {}, 'My new paragraph');
var region = ContentTools.EditorApp.get().regions()['name_of_my_region'];
region.attach(p);

[anthonyjb]

You’re mixing DOM elements and ContentEdit elements here, so region is a ContentEdit element (or collection) that has child ContentEdit elements (like Text, Image, Video, etc). It doesn’t know how to remove the DOM element you’re selecting, you’d need to pass the detatch method the ContentEdit element.

If you want to find an element in the region using the associated DOM element you could do something like:

findElementUsingSelector(region, selector) {
    // Find a ContentEdit element within the region using a DOM selector
    var targetDOM = region.domElement().querySelector(selector);
    for (var i = 0; i < region.children.length; i++) {
        var child = region.children[i];
        if (child === targetDOM) {
            return child;
        }
}

region.detatch(findElementUsingSelector(region, '#my-element'));

Moving back to your previous question, you can’t add DOM elements into the DOM element representing the region, you can however create a DOM element, parse it using the correct class in ContentEdit, and add it to the region:

// Create an DOM element using innerHTML
var wrapper = document.createElement('div');
wrapper.innerHTML = '<p>My new paragraph</p>';

// Convert the DOM element to a ContentEdit Text element
var p = ContentEdit.Text.fromDOMElement(wrapper.querySelector('p'));

// Add the paragraph to the region
region.attach(p);