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

Difficulty Level : Basic
Last Updated : 28 Nov, 2019

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.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to select html element using ID in
        jQuery when ID contains a dot character ?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.4.1.min.js">
    </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>

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.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to select html element using ID in
        jQuery when ID contains a dot character ?
    </title>
      
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
    </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>