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= </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= </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:
Please Login to comment...