How to change the href value of "a" tag dynamic in Oracle APEX

  

JavaScript is a high-level, interpreted, dynamically-typed and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML documents. DOM acts as an interface between JavaScript and HTML combined with CSS. The DOM represents the document as nodes and objects i.e. the browser turns every HTML tag into a JavaScript object that we can manipulate. DOM is an object-oriented representation of the web page, that can be modified with a scripting language such as JavaScript. To manipulate objects inside the document we need to select it and then manipulate.

Selecting an element can be done in five ways:

• document.querySelector() Method: It returns the first element that matches the query.
• document.querySelectorAll() Method: It returns all the elements that matches the query.
• document.getElementById() Method: It returns the one element that matches the id.
• document.getElementsByClassName() Method: It returns all the elements that matches the class.
• document.getElementsByTagName() Method: It returns a list of the elements that matches the tag name.

DOM allows attribute manipulation. Attributes control the HTML tag’s behavior or provide additional information about the tag. JavaScript provides several methods for manipulating an HTML element attribute.

The following methods are used to manipulate the attributes:

• getAttribute() method: It returns the current value of an attribute on the element and returns null if the specified attribute does not exist on the element.
• setAttribute() method: It updates the value of an already existing attribute on the specified element else a new attribute is added with the specified name and value.
• removeAttribute() method: It is used to remove an attribute of the specified element.

Example 

Example 2  Change  Image dynamic with href

1) Define Page Item like Part code and mentioned post text code 

<a href="&P6004_SRC_IMG." data-lightbox="image-1" data-title="&P6004_DESCRLNG." > Image </a>

2) Call function on change of Part code  

3) Define Function Global Variable Declaration