In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > canHaveChildren

canHaveChildren property

Browser support:

Retrieves a Boolean value that indicates whether the element can contain child elements.

If an element can have children, than you can add them with the insertBefore or appendChild methods. To check whether an element can have HTML content, use the canHaveHTML property.

Syntax:

object.canHaveChildren;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Boolean, one of the following values:

false

Element cannot contain other elements.

true

Element cancontain other elements.

Default: this property has no default value.

Example HTML code 1:

The following example checks if an element can have children before inserting one:

<head>
    <script type="text/javascript">
        function AddChildren (id) {
            var span = document.createElement ("span");
            span.style.color = "#FF0000";
            span.innerHTML = " and some new content";

            var elemToAdd = document.getElementById (id);

            if ('canHaveChildren' in elemToAdd) {
                if (elemToAdd.canHaveChildren) {
                    elemToAdd.appendChild (span);
                } else {
                    alert ("Element cannot have children.");
                }
            } else {
                alert ("Your browser does  not support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">The original contents</div>
    <input id="myInput" />
    <button onclick="AddChildren ('myDiv');">Add children to the division</button>
    <button onclick="AddChildren ('myInput');">Add children to the input</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the canHaveChildren property:

<head>
    <script type="text/javascript">
        function Init () {
            var message = "";
            var content = document.getElementById ("content");

            if (('canHaveChildren' in content) && ('canHaveHTML' in content)) {
                var child = content.firstChild;
                while (child) {
                    if (child.tagName) {
                        if (child.canHaveChildren) {
                            message += child.tagName + " elements can have children.<br />";
                        }
                        else {
                            message += child.tagName + " elements cannot have children.<br />";
                        }

                        if (child.canHaveHTML) {
                            message += child.tagName + " elements can have HTML content.<br />";
                        }
                        else {
                            message += child.tagName + " elements cannot have HTML content.<br />";
                        }
                    }
                    child = child.nextSibling;
                }
            }
            else {
                message = "Your browser does  not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }

    </script>
</head>
<body onload="Init ()">
    canHaveChildren and canHaveHTML property test for different elements:
    <div id="content">
        <div id="info" style="background-color:#e0a0a0; width:300px"></div>
        <select>
            <option>first option</option>
            <option>second option</option>
        </select>
        <br />
        <button>Test button</button>
    </div>
</body>