Adding Element to DOM - Yash-777/SeleniumDriverAutomation GitHub Wiki

Adding an element-Node to a DOM tree at a specified position or last to a Specified Element as a ChildNode.

Using any these Functions:

• Element.insertAdjacentHTML(): This method parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

Syntax:

element.insertAdjacentHTML(position, text);

Visualization of position names

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

• Node.appendChild(): This method adds a node to the end of the list of children of a specified parent node.

Syntax:

var aChild = element.appendChild(aChild);

• Node.insertBefore(): This method inserts the specified node before the reference node as a child of the current node.

Syntax:

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

Example :

function insertHTML_ByXPath( xpath, position, newElement) {
    var element = document.evaluate(xpath, window.document, null, 9, null ).singleNodeValue;
    element.insertAdjacentHTML(position, newElement);
    element.style='border:3px solid orange';
}

var xpath_DOMElement = '//*[@id="js-repo-pjax-container"]/div[1]/div[1]/h1/strong/a';
var childHTML = '<div id="Yash">My <B>\"Repository\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);

Element.setAttribute(): Adds a new attribute or changes the value of an existing attribute on the specified element.

Syntax & Example to disable a button: The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

element.setAttribute(name, value);

HTML « <button>Hello World</button>

var b = document.querySelector("button");
b.setAttribute("disabled", "disabled"); // true | false | disabled 

b.removeAttribute("disabled"); // b.disabled=false;