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: