Press enter to see results or esc to cancel.

Insertion Before, Inside or After any HTML element

Insertion positions Before, Inside and After HTML element can be used to insert any code anywhere on the page. Ad Inserter supports client-side and server-side insertion. Client-side insertion uses Javascript code to insert code block during or after the page is loaded in the browser, while server-side insertion means insertion when the plugin is called and the page is created. However, server-side insertion requires enabled output buffering (tab / tab General).

If you need to insert before or after specific HTML tag (for example, h2) inside post or static page content you can also use insertion before/after paragraph and configure paragraph counting for this specific tag. This approach will give you more control over insertion positions.

Check How Ad Inserter works to understand how ads are displayed and how code is inserted.

HTML element(s)

Here you define CSS selector (or comma separated list of selectors) of the HTML element(s) where you want to insert the code block (#id, .class). To get right CSS selector you can use web inspector in the browser or built-in HTML Element Selection tool. To open it click on the small button before the field.

ad inserter html selection button

In most cases the initial selector of most elements will be the complete path of that element which will be valid only on the page where you have selected that element.

This is because most posts or pages contain element IDs (#id) that are unique to this post or page. You need to edit and shorten the selector to be universal and still valid for all wanted posts or pages. Try to make the selector universal and as short as possible.

Of course, not all IDs are wrong or unwanted – you need to know what ID means and where it is used. To check your selector on different pages simply navigate the website to see if the right element is selected on all wanted posts or pages.

Insertion

Client-side insertion inserts the code immediately when the code at Javascript code position runs. Wanted HTML element must be already available (above) on the page. Client-side when DOM ready (default) inserts the code after the page is loaded and DOM is ready  (all page elements are available).

Server-side insertion is the best approach, however, it requires output buffering which is by default disabled as it may not work with all themes. To enable it go to plugin settings (tab / tab General) and set Output buffering to enabled. After you save settings you will be able to select server-side for insertion before/after HTML element. For server-side insertion you can use most common CSS selectors (pseudo selectors can’t be used).

Javascript code position: Page position where the Javascript code for client-side insertion will be inserted. Should be after the wanted HTML element if not waiting for DOM ready.

Client-side insertion needs error-free Javascript page – in case of issues check browser’s console for errors or messages.

Filter and Max insertions setting works only when the page is created and Ad Inserter called. Therefore, if you would like to use filter or define max insertions with insertion Before/After HTML element you need to use server-side insertion. If you are using client-side insertion you need to specify valid CSS selector that will limit your insertions.

Insertion Before, Inside or After HTML element may have undesired effects when using with Ajax calls (infinite scroll). Use other server-side insertions instead.

Insertion inside HTML element

When you select automatic insertion Inside HTML element additional setting becomes visible: Action. This action defines how the code block is inserted (or HTML element replaced):

    ad inserter automatic insertion inside html element

    • Prepend content – the block is added as the first child inside target element
    • Append content – the block is added as the last child inside target element
    • Replace content – the block replaces the content inside target element – if the block is empty it will clear the content of the target element
    • Replace element – the block replaces the target element – if the block is empty it will remove the target element from the DOM
    <before-element>
    <element>
      <inside-element-prepend>
      <first-child>
      <second-child>
      <third-child>
      <fourth-child>
      <...>
      <last-child>
      <inside-element-append>
    </element>
    <after-element>

    When you are inserting HTML tags inside HTML element make sure you set Alignment and Style to No wrapping to prevent inserting <div> wrapper around the code (tag) you are inserting. This way you can, for example, insert <li> element inside <ul>.