Unlike the Node.textContent property, the Element.innerText property returns only rendered text, similar to what a user would be able to select with their cursor or the keyboard when highlighting text. The Element.innerText property gets and sets the rendered text of an element (and omits the markup). Here’s a demo of the Node.textContent property. textContent // HTML elements are automatically encoded and rendered as-is textContent = 'We can add this to the beginning. textContent += ' Add this after what is already there.' // Add text to the beginning of an element's existing content textContent = 'We can dynamically change the content.' // Add text to the end of an element's existing content This completely replaces whats there, including any HTML elements querySelector ( '.greeting' ) // Get text content In the example below, you may notice that the Node.textContent property gets all of the text content, including CSS properties inside of a style element and hidden UI elements.Īny HTML elements included in a string when setting content with the Node.textContent property are automatically encoded and rendered as-is. You can use the Node.textContent property to get and set the text of an element (and omit the markup) as a string. Here’s a demo of the Element.outerHTML property. outerHTML = 'We can add this to the beginning. outerHTML += ' Add this after what is already there.' // Add HTML before the element (and outside of it) outerHTML = 'Goodbye, friend! Click here to leave.' // Add HTML after the element (and outside of it) This completely replaces the element and all of its content querySelector ( '.greeting' ) // Get HTML content
0 Comments
Leave a Reply. |