# Inserting dynamic content into the Document Object Model immediately following its trigger element

ID: SCR26

Technology: client-side-script

Type: Technique

## When to Use

HTML and script

## Description

The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.

The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its `onclick` event. These elements are natively focusable, and their `onclick` event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.

Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted.

## Examples

This example creates a menu when a link is clicked and inserts it after the link. The `onclick` event of the link is used to call the ShowHide script, passing in an `id` for the new menu as a parameter.

    <button aria-expanded="false" type="button" onclick="ShowHide('foo',this)">
      Toggle
    </button>

The ShowHide script creates a `div` containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new `div` to be in the DOM after the menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.

    function ShowHide(id,src){
      var el = document.getElementById(id);
      if (!el){
        el = document.createElement("div");
        el.id = id;
        var link = document.createElement("a");
        link.href = "/laptops";
        link.appendChild(document.createTextNode("Laptops"));
        el.appendChild(link);
        src.parentElement.appendChild(el);
        src.setAttribute("aria-controls", id);
        src.setAttribute("aria-expanded", "true");
       }
       else if (el && src.getAttribute("aria-expanded") === "false"){
         el.style.display = 'block';
         src.setAttribute("aria-expanded", "true");
       }
       else{
         el.style.display = 'none';
         src.setAttribute("aria-expanded", "false");
       }
    }

CSS is used to make the `div` and link look like a menu.

## Tests

### Procedure

1. Find all areas of the page that trigger dialogs that are not pop-up windows.
2. Check that the dialogs are triggered from the click event of a button or a link.
3. Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.

### Expected Results

- #2 and #3 are true.