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.

<!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> 

Output 2:

Before Clicking the button:
After Clicking the button:

My Personal Notes

Recommended Posts: