use of the innerHTML and innerText properties in JavaScript to manipulate the content of HTML elemen
// Outputs: "The quick brown fox\nJumped over the lazy dog"
console.log(document.body.innerText);
// Outputs: "The quick brown foxJumped over the lazy dog"
console.log(div.innerText);
====================
This code snippet demonstrates the use of the innerHTML and innerText properties in JavaScript to manipulate the content of HTML elements.
Here's what each part does:
div.innerHTML = 'div The strong quick /strong brown fox /div div Jumped over the lazy dog /div ';: This line sets the innerHTML property of a div element (presumably previously created or selected in the DOM) to a string containing HTML markup. The string contains two nested div elements with some text content and one of them includes a strong element.
document.body.innerHTML = ' div The strong quick /strong brown fox /div div Jumped over the lazy dog /div ';: Similarly, this line sets the innerHTML property of the body element of the document to the same HTML string as above.
console.log(document.body.innerText);: This line logs the innerText property of the body element to the console. The innerText property returns the text content of the element and its descendants, without any HTML markup. In this case, it will output the concatenated text content of both div elements within the body , separated by a newline.
console.log(div.innerText);: This line logs the innerText property of the div element (presumably defined earlier in the code) to the console. It will output the text content of the div element and its descendants, but since innerText does not include any HTML markup, the strong element is ignored. Therefore, it will output the concatenated text content of both div elements within the div, without any formatting.
To use this code:
Create or select the HTML elements (div and body in this case) that you want to manipulate.
Set the innerHTML property of the element to the desired HTML markup string to add or replace its content.
Use the innerText property to retrieve the text content of the element and its descendants without any HTML markup.