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

You are here: Reference > JavaScript > client-side > selection and ranges > methods > surroundContents (Range)

surroundContents method (Range)

Browser support:

9

Places the specified element to surround the contents of the current Range object.

Note: The Range object and its surroundContents method are supported in Internet Explorer from version 9.

The contents of the current Range will be inserted after the last child of the specified element. The surroundContents method has a bug in Firefox, it removes the child nodes of the specified element before placing it around a Range.

Syntax:

object.surroundContents (element);

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

Parameters:

element

Required. Reference to the element that will be placed around the contents of the current Range object.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the surroundContents method:

<head>
    <script type="text/javascript">
        function PlaceBlueAroundRed () {
            var red = document.getElementById ("red");
            var bold = document.getElementById ("bold");
            
            if (document.createRange) {
                var range = document.createRange ();
                range.selectNode (red);
                range.surroundContents (bold);
            }
        }
    </script>
</head>
<body>
    <div id="red" style="color:red">Red text.</div>
    <div style="color:green">Green text.</div>
    <b id="bold">Bold text.</b>
    <br /><br />
    <button onclick="PlaceBlueAroundRed ()">Place the bold element around the red element!</button>
</body>