Remove innerHTML assignments, non-API docs (mdn#34917)

files/en-us/games/techniques/control_mechanisms/other/index.md

@@ -98,11 +98,11 @@ Leap.loop({
     horizontalDegree = Math.round(hand.roll() * toDegrees);
     verticalDegree = Math.round(hand.pitch() * toDegrees);
     grabStrength = hand.grabStrength;
-    output.innerHTML =
-      `Leap Motion: <br />` +
-      ` roll: ${horizontalDegree}° <br />` +
-      ` pitch: ${verticalDegree}° <br />` +
-      ` strength: ${grabStrength}`;
+    output.innerText = `Leap Motion:
+  roll: ${horizontalDegree}°
+  pitch: ${verticalDegree}°
+  strength: ${grabStrength}
+`;
   },
 });
 ```

files/en-us/learn/accessibility/css_and_javascript/index.md

@@ -268,7 +268,7 @@ We only do the validation when the form is submitted — this is so that we don'
 form.onsubmit = validate;
 
 function validate(e) {
-  errorList.innerHTML = "";
+  errorList.textContent = "";
   for (let i = 0; i < formItems.length; i++) {
     const testItem = formItems[i];
     if (testItem.input.value === "") {
@@ -277,7 +277,7 @@ function validate(e) {
     }
   }
 
-  if (errorList.innerHTML !== "") {
+  if (errorList.hasChildNodes()) {
     e.preventDefault();
   }
 }
@@ -287,7 +287,7 @@ function validate(e) {
 
 Real form validation would be much more complex than this — you'd want to check that the entered name actually looks like a name, the entered age is actually a number and is realistic (e.g. nonnegative and less than 4 digits). Here we've just implemented a simple check that a value has been filled in to each input field (`if (testItem.input.value === '')`).
 
-When the validation has been performed, if the tests pass then the form is submitted. If there are errors (`if (errorList.innerHTML !== '')`) then we stop the form submitting (using [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault)), and display any error messages that have been created (see below). This mechanism means that the errors will only be shown if there are errors, which is better for usability.
+When the validation has been performed, if the tests pass then the form is submitted. If there are errors (`if (errorList.hasChildNodes())`) then we stop the form submitting (using [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault)), and display any error messages that have been created (see below). This mechanism means that the errors will only be shown if there are errors, which is better for usability.
 
 For each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the `errorList`.
 

files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md

@@ -201,7 +201,7 @@ function updateValue(select, index) {
   const optionList = select.querySelectorAll(".option");
 
   nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
+  value.textContent = optionList[index].textContent;
   highlightOption(select, optionList[index]);
 }
 

files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md

@@ -207,7 +207,7 @@ function updateValue(select, index) {
   optionList[index].setAttribute("aria-selected", "true");
 
   nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
+  value.textContent = optionList[index].textContent;
   highlightOption(select, optionList[index]);
 }
 

files/en-us/learn/forms/how_to_build_custom_form_controls/index.md

@@ -1309,7 +1309,7 @@ function updateValue(select, index) {
   nativeWidget.selectedIndex = index;
 
   // We update the value placeholder accordingly
-  value.innerHTML = optionList[index].innerHTML;
+  value.textContent = optionList[index].textContent;
 
   // And we highlight the corresponding option of our custom control
   highlightOption(select, optionList[index]);
@@ -1571,7 +1571,7 @@ function updateValue(select, index) {
   const optionList = select.querySelectorAll(".option");
 
   nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
+  value.textContent = optionList[index].textContent;
   highlightOption(select, optionList[index]);
 }
 
@@ -1708,7 +1708,7 @@ function updateValue(select, index) {
   optionList[index].setAttribute("aria-selected", "true");
 
   nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
+  value.textContent = optionList[index].textContent;
   highlightOption(select, optionList[index]);
 }
 ```
@@ -1902,7 +1902,7 @@ function updateValue(select, index) {
   optionList[index].setAttribute("aria-selected", "true");
 
   nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
+  value.textContent = optionList[index].textContent;
   highlightOption(select, optionList[index]);
 }
 

files/en-us/learn/javascript/building_blocks/conditionals/index.md

@@ -459,7 +459,7 @@ select.addEventListener('change', () => {
 });
 
 function createCalendar(days, choice) {
-  list.innerHTML = '';
+  list.textContent = "";
   h1.textContent = choice;
   for (let i = 1; i <= days; i++) {
     const listItem = document.createElement('li');
@@ -530,7 +530,7 @@ select.addEventListener("change", () => {
 });
 
 function createCalendar(days, choice) {
-  list.innerHTML = "";
+  list.textContent = "";
   h1.textContent = choice;
   for (let i = 1; i <= days; i++) {
     const listItem = document.createElement("li");

files/en-us/learn/javascript/building_blocks/looping_code/index.md

@@ -614,7 +614,7 @@ If you get really stuck, press "Show solution" to see a solution.
 </p>
 <textarea id="code" class="playable-code" style="height: 300px;width: 95%">
 let output = document.querySelector('.output');
-output.innerHTML = '';
+output.textContent = "";
 
 // let i = 10;
 
@@ -682,7 +682,7 @@ solution.addEventListener("click", function () {
 });
 
 let jsSolution = `const output = document.querySelector('.output');
-output.innerHTML = '';
+output.textContent = "";
 
 let i = 10;
 

files/en-us/learn/javascript/first_steps/arrays/index.md

@@ -294,8 +294,8 @@ Let's return to the example we described earlier — printing out product names
 const list = document.querySelector('.output ul');
 const totalBox = document.querySelector('.output p');
 let total = 0;
-list.innerHTML = '';
-totalBox.textContent = '';
+list.textContent = "";
+totalBox.textContent = "";
 // number 1
                 'Underpants:6.99'
                 'Socks:5.99'
@@ -360,8 +360,8 @@ solution.addEventListener("click", () => {
 const jsSolution = `const list = document.querySelector('.output ul');
 const totalBox = document.querySelector('.output p');
 let total = 0;
-list.innerHTML = '';
-totalBox.textContent = '';
+list.textContent = "";
+totalBox.textContent = "";
 
 const products = [
   'Underpants:6.99',
@@ -489,7 +489,7 @@ const list = document.querySelector('.output ul');
 const searchInput = document.querySelector('.output input');
 const searchBtn = document.querySelector('.output button');
 
-list.innerHTML = '';
+list.textContent = "";
 
 const myHistory = [];
 const MAX_HISTORY = 5;
@@ -501,7 +501,7 @@ searchBtn.onclick = () => {
 
     // empty the list so that we don't display duplicate entries
     // the display is regenerated every time a search term is entered.
-    list.innerHTML = '';
+    list.textContent = "";
 
     // loop through the array, and display all the search terms in the list
     for (const itemText of myHistory) {
@@ -584,7 +584,7 @@ const jsSolution = `const list = document.querySelector('.output ul');
 const searchInput = document.querySelector('.output input');
 const searchBtn = document.querySelector('.output button');
 
-list.innerHTML = '';
+list.textContent = "";
 
 const myHistory = [];
 const MAX_HISTORY = 5;
@@ -596,7 +596,7 @@ searchBtn.onclick = () => {
 
     // empty the list so that we don't display duplicate entries
     // the display is regenerated every time a search term is entered.
-    list.innerHTML = '';
+    list.textContent = "";
 
     // loop through the array, and display all the search terms in the list
     for (const itemText of myHistory) {

files/en-us/learn/javascript/first_steps/useful_string_methods/index.md

@@ -237,7 +237,7 @@ Think about how you could test whether the message in each case is a Christmas m
 
 <textarea id="code" class="playable-code" style="height: 290px; width: 95%">
 const list = document.querySelector('.output ul');
-list.innerHTML = '';
+list.textContent = "";
 const greetings = ['Happy Birthday!',
                  'Merry Christmas my love',
                  'A happy Christmas to all the family',
@@ -314,7 +314,7 @@ solution.addEventListener("click", () => {
 });
 
 const jsSolution = `const list = document.querySelector('.output ul');
-list.innerHTML = '';
+list.textContent = "";
 const greetings = [
   'Happy Birthday!',
   'Merry Christmas my love',
@@ -411,7 +411,7 @@ In this exercise, we have the names of cities in the United Kingdom, but the cap
 
 <textarea id="code" class="playable-code" style="height: 250px; width: 95%">
 const list = document.querySelector('.output ul');
-list.innerHTML = '';
+list.textContent = "";
 const cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
 
 for (const city of cities) {
@@ -483,7 +483,7 @@ solution.addEventListener("click", function () {
 });
 
 const jsSolution = `const list = document.querySelector('.output ul');
-list.innerHTML = '';
+list.textContent = "";
 const cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
 
 for (const city of cities) {
@@ -586,7 +586,7 @@ We'd recommend doing it like this:
 
 <textarea id="code" class="playable-code" style="height: 285px; width: 95%">
 const list = document.querySelector('.output ul');
-list.innerHTML = '';
+list.textContent = "";
 const stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                   'GNF576746573fhdg4737dh4;Greenfield',
                   'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
@@ -662,7 +662,7 @@ solution.addEventListener("click", function () {
 });
 
 const jsSolution = `const list = document.querySelector('.output ul');
-list.innerHTML = '';
+list.textContent = '';
 const stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                   'GNF576746573fhdg4737dh4;Greenfield',
                   'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',

files/en-us/learn/mathml/first_steps/scripts/index.md

@@ -249,7 +249,7 @@ scriptedElements.forEach((scripted) => {
 });
 document.getElementById("clearOutput").addEventListener("click", () => {
   clearHighlight();
-  outputDiv.innerHTML = "";
+  outputDiv.textContent = "";
 });
 ```
 

files/en-us/learn/mathml/first_steps/text_containers/index.md

@@ -139,7 +139,7 @@ tokenElements.forEach((token) => {
 });
 document.getElementById("clearOutput").addEventListener("click", () => {
   clearHighlight();
-  outputDiv.innerHTML = "";
+  outputDiv.textContent = "";
 });
 ```
 
@@ -413,7 +413,7 @@ tokenElements.forEach((token) => {
 });
 document.getElementById("clearOutput").addEventListener("click", () => {
   clearHighlight();
-  outputDiv.innerHTML = "";
+  outputDiv.textContent = "";
 });
 ```
 

files/en-us/web/accessibility/aria/aria_live_regions/index.md

@@ -228,7 +228,7 @@ function change(event) {
 
   switch (event.target.id) {
     case "year":
-      yearOut.innerHTML = event.target.value;
+      yearOut.textContent = event.target.value;
       break;
     default:
       return;

files/en-us/web/accessibility/aria/roles/alert_role/index.md

@@ -72,9 +72,9 @@ Using JavaScript, you can dynamically change the content _inside_ the element wi
 
 ```js
 // clear the contents of the container
-document.getElementById("alertContainer").innerHTML = "";
+document.getElementById("alertContainer").textContent = "";
 // inject the new alert message
-document.getElementById("alertContainer").innerHTML =
+document.getElementById("alertContainer").textContent =
   "Your session will expire in " + expiration + " minutes";
 ```
 
@@ -102,9 +102,9 @@ However, make sure that the container is not hidden using `display:none`, as thi
 
 ```js
 // clear the contents of the container
-document.getElementById("hiddenAlertContainer").innerHTML = "";
+document.getElementById("hiddenAlertContainer").textContent = "";
 // inject the new alert message
-document.getElementById("hiddenAlertContainer").innerHTML =
+document.getElementById("hiddenAlertContainer").textContent =
   "All items were removed from your inventory.";
 ```
 

files/en-us/web/css/@container/index.md

@@ -154,11 +154,11 @@ You can then use the `@container` at-rule to apply styles to the element with th
 ```js hidden
 const post = document.querySelector(".post");
 const span = document.createElement("span");
-span.innerHTML = ".post width: " + post.clientWidth + "px";
+span.textContent = ".post width: " + post.clientWidth + "px";
 post.parentNode.insertBefore(span, post.nextSibling);
 // update on resize
 window.addEventListener("resize", () => {
-  span.innerHTML = ".post width: " + post.clientWidth + "px";
+  span.textContent = ".post width: " + post.clientWidth + "px";
 });
 ```
 

files/en-us/web/css/_colon_scope/index.md

@@ -143,7 +143,7 @@ This example demonstrates using the `:scope` pseudo-class in JavaScript. This ca
 const context = document.getElementById("context");
 const selected = context.querySelectorAll(":scope > div");
 
-document.getElementById("results").innerHTML = Array.prototype.map
+document.getElementById("results").textContent = Array.prototype.map
   .call(selected, (element) => `#${element.getAttribute("id")}`)
   .join(", ");
 ```

files/en-us/web/css/length/index.md

@@ -294,7 +294,9 @@ inputElem.addEventListener("change", () => {
   const result = document.createElement("div");
   result.className = "result";
   result.style.width = inputElem.value;
-  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
+  const code = document.createElement("code");
+  code.textContent = `width: ${inputElem.value}`;
+  result.appendChild(code);
   resultsDiv.appendChild(result);
 
   inputElem.value = "";

files/en-us/web/javascript/reference/template_literals/index.md

@@ -325,7 +325,7 @@ const node = document.getElementById("formula");
 MathJax.typesetClear([node]);
 // Throws in older ECMAScript versions (ES2016 and earlier)
 // SyntaxError: malformed Unicode character escape sequence
-node.innerHTML = String.raw`$\underline{u}$`;
+node.textContent = String.raw`$\underline{u}$`;
 MathJax.typesetPromise([node]);
 ```
 

files/en-us/web/media/audio_and_video_delivery/webaudio_playbackrate_explained/index.md

@@ -51,7 +51,7 @@ window.onload = () => {
   p.addEventListener(
     "input",
     () => {
-      c.innerHTML = p.value;
+      c.textContent = p.value;
       v.playbackRate = p.value;
     },
     false,

files/en-us/web/progressive_web_apps/tutorials/cycletracker/javascript_functionality/index.md

@@ -192,7 +192,7 @@ function renderPastPeriods() {
   }
 
   // Clear the list of past periods, since we're going to re-render it.
-  pastPeriodContainer.innerHTML = "";
+  pastPeriodContainer.textContent = "";
 
   const pastPeriodHeader = document.createElement("h2");
   pastPeriodHeader.textContent = "Past periods";
@@ -289,7 +289,7 @@ function renderPastPeriods() {
   if (periods.length === 0) {
     return;
   }
-  pastPeriodContainer.innerHTML = "";
+  pastPeriodContainer.textContent = "";
   pastPeriodHeader.textContent = "Past periods";
   periods.forEach((period) => {
     const periodEl = document.createElement("li");

files/en-us/webassembly/javascript_interface/global/global/index.md

@@ -53,9 +53,9 @@ const output = document.getElementById("output");
 function assertEq(msg, got, expected) {
   const result =
     got === expected
-      ? `SUCCESS! Got: ${got}<br>`
-      : `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
-  output.innerHTML += `Testing ${msg}: ${result}`;
+      ? `SUCCESS! Got: ${got}\n`
+      : `FAIL!\nGot: ${got}\nExpected: ${expected}\n`;
+  output.innerText += `Testing ${msg}: ${result}`;
 }
 
 assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");