JS.DOM.ContentHtml.ModDOMnodes.textContent.innerHTML
window.onload = init;
function init() {
// DOM is ready
var firstP = document.querySelector("#first");
console.log(firstP.textContent);
console.log(firstP.innerHTML);
firstP.textContent = "Hello I'm the first paragraph";
console.log(firstP.textContent);
var secondP = document.querySelector("#second");
console.log(secondP.textContent);
console.log(secondP.innerHTML);
secondP.textContent = "Hello I'm the second paragraph";
console.log(secondP.textContent);
console.log(secondP.innerHTML);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!---
Modifying selected HTML elements
We've already seen many examples (even during week 1) in which we selected one or more elements, and modified their content. Let's summarise all the methods we've seen, and perhaps introduce a few new things...
Properties that can be used to change the value of selected DOM node
Using the innerHTML property
This property is useful when you want to change all the children of a given element. It can be used to modify the text content of an element, or to insert a whole set of HTML elements inside another one.
Typical use:
var elem = document.querySelector('#myElem');
elem.innerHTML = 'Hello '; // replace content by Hello
elem.innerHTML += '<b>Michel Buffa</b>', // append at the end
// Michel Buffa in bold
elem.innerHTML = 'Welcome' + elem.innerHTML; // insert Welcome
// at the beginning
elem.innerHTML = ''; // empty the elem
Using the textContent property
It's also possible, with selected nodes/elements that contain text, to use the textContent property to read the text content or to modify it. There are subtle differences that can be seen in the above example (click the 'edit on CodePen" part on the top left, and once in codePen, open the devtool console):
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Modifying content of selected DOM nodes</title>
</head>
<body>
<h1>Open the console and look at the JavaScript code!</h1>
<p id="first">first paragraph</p>
<p id="second"><em>second</em> paragraph</p>
</body>
</html>