How to select html element using ID in jQuery when ID contains a dot character ?

The task is to select an HTML element/node by ID using jQuery when the ID itself contains a DOT (‘ . ‘). Not only dots(.) there are so many other meta character such as ! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ ` { | } ~ can be selected by this procedure.

Syntax:

$('#ID_PREFIX\\.ID_SUFFIX')

Approach: In order to select an HTML element by ID we just need to escape it using double slash (‘ \\ ‘).

Example 1: In this example, we will change the color of the heading element using jQuery.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to select html element using ID in
        jQuery when ID contains a dot character ?
    </title>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <!-- Heading with ID containing a DOT that
        will be selected later -->
    <h1 id="Geeks.Head" style="color: green;">
        GeeksforGeeks
    </h1>
          
    <b>
        A Computer Science
        portal for Geeks
    </b>
    <br>
          
    <p>
        Select html nodes by ID with jQuery
        when the id contains a dot
    </p>
          
    <button style="color: green;">
        Click!
    </button>
      
    <script type="text/javascript">
        $('button').click(function() {
  
            // Selecting ID containing a
            // DOT by escaping using '\\'
            $('#Geeks\\.Head').css({
                'color': 'black'
            });
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Clicking the button:
  • After Clicking the button:

Example 2: In this example we will select an element with ID containing multiple dots and change its background color also with the header.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to select html element using ID in
        jQuery when ID contains a dot character ?
    </title>
      
    <script src=
    </script>
</head>
  
<!-- id contains dot(.) -->
<body id="Main..Body">
    <center>
          
        <!-- id contains dot(.) -->
        <h1 id="Geeks.Head" style="color: green;">
            GeeksforGeeks
        </h1>
          
        <b>
            A Computer Science
            portal for Geeks
        </b>
        <br>
          
        <p>
            Select html nodes by ID with jQuery
            when the id contains a dot
        </p>
          
        <button style="color: green;">
            Click!
        </button>
    </center>
      
    <script type="text/javascript">
        $('button').click(function() {
          
            // Selecting ID containing a
            // DOT by escaping using '\\'
            $('#Geeks\\.Head').css({
                'color': 'purple'
            });
          
            // Selecting ID containing
            // multiple DOTs
            $('#Main\\.\\.Body').css({
                'background-color': 'Yellow'
            });
        });
    </script>
</body>
  
</html>

chevron_right


Output 2:

  • Before Clicking the button:
  • After Clicking the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.