How to insert containers

Sometimes you may need to add a container to an existing page without placing ADK container markup in its HTML. This is useful when the publisher cannot change the page template, or when you want to preview a placement next to existing content before committing to changing the page.

Prefer adding container elements directly to the page HTML when possible. Dynamic insertion depends on the target selector and surrounding DOM remaining stable. Also make sure the website supports adding elements on the fly using raw DOM manipulation.

In this example we start by configuring our container and setting up the HTML without any container initially.

adk.config()
    .addTemplate('com.advisible.native.teaser', adk.template.config()
        .url('/teaser.html'))

    .addContainer('native-teaser', adk.container.config())

<div id="target-element">The target paragraph. The inserted container appears after it.</div>
<div>This content follows the target element.</div>

To simplify dynamic insertion, we use the adk.container.insert utility to add the container to the desired location and then attach it.

const elem = adk.container.insert(
    'native-teaser', // The ID of the container to insert
    '#target-element', // The target element CSS selector
    'after', // DOM manipulation method used for inserting the container
)
adk.container.attach(elem)