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

surroundContents method (Range)

Browser support:
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.


object.surroundContents (element);
You can find the related objects in the Supported by objects section below.


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:
    <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);
    <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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content