diff --git a/audiocontext-setsinkid/app.js b/audiocontext-setsinkid/app.js
index 79d6b5fc..37b52c77 100644
--- a/audiocontext-setsinkid/app.js
+++ b/audiocontext-setsinkid/app.js
@@ -7,13 +7,13 @@ playBtn.disabled = true;
mediaDeviceBtn.addEventListener('click', async () => {
if ("setSinkId" in AudioContext.prototype) {
- selectDiv.innerHTML = '';
+ selectDiv.replaceChildren();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const devices = await navigator.mediaDevices.enumerateDevices();
const label = document.createElement('label');
- label.innerHTML = 'Select output device:';
+ label.textContent = 'Select output device:';
label.htmlFor = 'output-device-select';
const select = document.createElement('select');
@@ -54,8 +54,17 @@ mediaDeviceBtn.addEventListener('click', async () => {
stream.getAudioTracks().forEach((track) => track.stop());
} else {
+ const elem = (tag,props={})=> Object.assign(document.createElement(tag),props);
const para = document.createElement('p');
- para.innerHTML = 'Your browser doesn\'t support AudioContext.setSinkId(). Check the browser compatibility information to see which browsers support it.'
+ para.append(
+ "Your browser doesn\'t support ",
+ elem('code',{textContent:"AudioContext.setSinkId()"}),". Check the ",
+ elem('a',{
+ href:"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId#browser_compatibility",
+ textContent:"browser compatibility information"
+ }),
+ " to see which browsers support it."
+ );
selectDiv.appendChild(para);
}
});
diff --git a/channel-messaging-multimessage/index.html b/channel-messaging-multimessage/index.html
index a24e137e..56462f1f 100644
--- a/channel-messaging-multimessage/index.html
+++ b/channel-messaging-multimessage/index.html
@@ -51,7 +51,7 @@ Channel messaging demo
// Handle messages received on port1
function onMessage(e) {
- output.innerHTML = e.data;
+ output.textContent = e.data;
input.value = "";
}
diff --git a/contact-picker/demo.js b/contact-picker/demo.js
index ed565c3f..db9373d5 100644
--- a/contact-picker/demo.js
+++ b/contact-picker/demo.js
@@ -61,7 +61,7 @@ async function getContacts() {
function handleResults(contacts) {
ulResults.classList.toggle("success", true);
ulResults.classList.toggle("error", false);
- ulResults.innerHTML = "";
+ ulResults.replaceChildren();
renderResults(contacts);
}
@@ -72,24 +72,32 @@ function enableProp(cbox) {
function renderResults(contacts) {
contacts.forEach((contact) => {
- const lines = [];
- if (contact.name) lines.push(`Name: ${contact.name.join(", ")}`);
- if (contact.email) lines.push(`E-mail: ${contact.email.join(", ")}`);
- if (contact.tel) lines.push(`Telephone: ${contact.tel.join(", ")}`);
+ const li = document.createElement("li");
+ function newLine(key,value){
+ li.appendChild(document.createElement('b')).textContent = key + ": ";
+ if(value instanceof Node) li.appendChild(value);
+ else if(value != null && value !== "") li.appendChild(document.createTextNode(value));
+ li.appendChild(document.createElement('br'));
+ }
+ if (contact.name) newLine("Name",contact.name.join(", "));
+ if (contact.email) newLine("E-Mail",contact.email.join(", "));
+ if (contact.tel) newLine("Telephone",contact.tel.join(", "));
if (contact.address) {
contact.address.forEach((address) => {
- lines.push(`Address: ${JSON.stringify(address)}`);
+ newLine("Address",JSON.stringify(address));
});
}
if (contact.icon) {
contact.icon.forEach((icon) => {
const imgURL = URL.createObjectURL(icon);
- lines.push(`Icon: 
`);
+ const img = document.createElement("img");
+ img.src=imgURL;
+ newLine("Icon", img);
});
}
- lines.push(`Raw: ${JSON.stringify(contact)}`);
- const li = document.createElement("li");
- li.innerHTML = lines.join("
");
+ const code = document.createElement('code');
+ code.textContent = JSON.stringify(contact);
+ newLine("Raw",code);
ulResults.appendChild(li);
});
const strContacts = JSON.stringify(contacts, null, 2);
diff --git a/edit-context/html-editor/editor.js b/edit-context/html-editor/editor.js
index 1abad15e..247a011b 100644
--- a/edit-context/html-editor/editor.js
+++ b/edit-context/html-editor/editor.js
@@ -80,7 +80,7 @@ if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) {
// The render function's job is to update the view when the model changes.
function render(text, selectionStart, selectionEnd) {
// Empty the editor. We're re-rendering everything.
- editorEl.innerHTML = "";
+ editorEl.replaceChildren();
// Tokenize the text.
currentTokens = tokenizeHTML(text);
diff --git a/execcommand/script.js b/execcommand/script.js
index 2c3c5f7c..e9e5219a 100644
--- a/execcommand/script.js
+++ b/execcommand/script.js
@@ -250,8 +250,8 @@ commands.forEach((command) => {
} else {
button.setAttribute("disabled", "true");
}
- button.innerHTML = ` ${command.name}`;
+ const i = document.createElement("i");
+ i.className = command.icon ? `fa fa-${command.icon}` : "";
+ button.append(i, ` ${command.name}`);
buttons.appendChild(button);
});
diff --git a/fetch/fetch-array-buffer/index.html b/fetch/fetch-array-buffer/index.html
index d8feaa3e..c9a414c3 100644
--- a/fetch/fetch-array-buffer/index.html
+++ b/fetch/fetch-array-buffer/index.html
@@ -53,7 +53,7 @@ Fetch arrayBuffer example
play.onclick = () => {
getData()
.then((source) => {
- errorDisplay.innerHTML = "";
+ errorDisplay.replaceChildren();
currentSource = source;
currentSource.start(0);
play.disabled = true;
@@ -73,7 +73,7 @@ Fetch arrayBuffer example
};
// dump script to pre element
- pre.innerHTML = myScript.innerHTML;
+ pre.textContent = myScript.textContent;