Skip to content

Refractor: mdn/#567 mdn/domexamples fix innerHTML to textContent #383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sakthivelgreen wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refractor: mdn/#567 mdn/domexamples fix innerHTML to textContent #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions audiocontext-setsinkid/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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 <code>AudioContext.setSinkId()</code>. Check the <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId#browser_compatibility">browser compatibility information</a> 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);
}
});
Expand Down
2 changes: 1 addition & 1 deletion channel-messaging-multimessage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h1>Channel messaging demo</h1>

// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
output.textContent = e.data;
input.value = "";
}
</script>
Expand Down
28 changes: 18 additions & 10 deletions contact-picker/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -72,24 +72,32 @@ function enableProp(cbox) {

function renderResults(contacts) {
contacts.forEach((contact) => {
const lines = [];
if (contact.name) lines.push(`<b>Name:</b> ${contact.name.join(", ")}`);
if (contact.email) lines.push(`<b>E-mail:</b> ${contact.email.join(", ")}`);
if (contact.tel) lines.push(`<b>Telephone:</b> ${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(`<b>Address:</b> ${JSON.stringify(address)}`);
newLine("Address",JSON.stringify(address));
});
}
if (contact.icon) {
contact.icon.forEach((icon) => {
const imgURL = URL.createObjectURL(icon);
lines.push(`<b>Icon:</b> <img src="${imgURL}">`);
const img = document.createElement("img");
img.src=imgURL;
newLine("Icon", img);
});
}
lines.push(`<b>Raw:</b> <code>${JSON.stringify(contact)}</code>`);
const li = document.createElement("li");
li.innerHTML = lines.join("<br>");
const code = document.createElement('code');
code.textContent = JSON.stringify(contact);
newLine("Raw",code);
ulResults.appendChild(li);
});
const strContacts = JSON.stringify(contacts, null, 2);
Expand Down
2 changes: 1 addition & 1 deletion edit-context/html-editor/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions execcommand/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,8 +250,8 @@ commands.forEach((command) => {
} else {
button.setAttribute("disabled", "true");
}
button.innerHTML = `<i class="${
command.icon ? `fa fa-${command.icon}` : ""
}"></i> ${command.name}`;
const i = document.createElement("i");
i.className = command.icon ? `fa fa-${command.icon}` : "";
button.append(i, ` ${command.name}`);
buttons.appendChild(button);
});
4 changes: 2 additions & 2 deletions fetch/fetch-array-buffer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h1>Fetch arrayBuffer example</h1>
play.onclick = () => {
getData()
.then((source) => {
errorDisplay.innerHTML = "";
errorDisplay.replaceChildren();
currentSource = source;
currentSource.start(0);
play.disabled = true;
Expand All @@ -73,7 +73,7 @@ <h1>Fetch arrayBuffer example</h1>
};

// dump script to pre element
pre.innerHTML = myScript.innerHTML;
pre.textContent = myScript.textContent;
</script>
</body>
</html>
50 changes: 20 additions & 30 deletions indexeddb-examples/idbcursor/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,19 +78,17 @@ window.onload = function () {
};

function displayData() {
list.innerHTML = "";
list.replaceChildren();
const transaction = db.transaction(["rushAlbumList"], "readonly");
const objectStore = transaction.objectStore("rushAlbumList");

objectStore.openCursor().onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
const listItem = document.createElement("li");
listItem.innerHTML =
"<strong>" +
cursor.value.albumTitle +
"</strong>, " +
cursor.value.year;
const strong = document.createElement('strong');
strong.textContent = cursor.value.albumTitle;
listItem.append(strong,", ",cursor.value.year);
list.appendChild(listItem);

//console.log(cursor.source);
Expand All @@ -109,19 +107,17 @@ window.onload = function () {
};

function advanceResult() {
list.innerHTML = "";
list.replaceChildren();
const transaction = db.transaction(["rushAlbumList"], "readonly");
const objectStore = transaction.objectStore("rushAlbumList");

objectStore.openCursor().onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
const listItem = document.createElement("li");
listItem.innerHTML =
"<strong>" +
cursor.value.albumTitle +
"</strong>, " +
cursor.value.year;
const strong = document.createElement('strong');
strong.textContent = cursor.value.albumTitle;
listItem.append(strong,", ",cursor.value.year);
list.appendChild(listItem);
cursor.advance(2);
} else {
Expand All @@ -135,7 +131,7 @@ window.onload = function () {
};

function deleteResult() {
list.innerHTML = "";
list.replaceChildren();
const transaction = db.transaction(["rushAlbumList"], "readwrite");
const objectStore = transaction.objectStore("rushAlbumList");

Expand All @@ -151,11 +147,9 @@ window.onload = function () {
};
} else {
const listItem = document.createElement("li");
listItem.innerHTML =
"<strong>" +
cursor.value.albumTitle +
"</strong>, " +
cursor.value.year;
const strong = document.createElement('strong');
strong.textContent = cursor.value.albumTitle;
listItem.append(strong,", ",cursor.value.year);
list.appendChild(listItem);
}
cursor.continue();
Expand All @@ -170,7 +164,7 @@ window.onload = function () {
};

function updateResult() {
list.innerHTML = "";
list.replaceChildren();
const transaction = db.transaction(["rushAlbumList"], "readwrite");
const objectStore = transaction.objectStore("rushAlbumList");

Expand All @@ -188,11 +182,9 @@ window.onload = function () {
}

const listItem = document.createElement("li");
listItem.innerHTML =
"<strong>" +
cursor.value.albumTitle +
"</strong>, " +
cursor.value.year;
const strong = document.createElement('strong');
strong.textContent = cursor.value.albumTitle;
listItem.append(strong,", ",cursor.value.year);
list.appendChild(listItem);

cursor.continue();
Expand All @@ -207,19 +199,17 @@ window.onload = function () {
};

function backwards() {
list.innerHTML = "";
list.replaceChildren();
const transaction = db.transaction(["rushAlbumList"], "readonly");
const objectStore = transaction.objectStore("rushAlbumList");

objectStore.openCursor(null, "prev").onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
const listItem = document.createElement("li");
listItem.innerHTML =
"<strong>" +
cursor.value.albumTitle +
"</strong>, " +
cursor.value.year;
const strong = document.createElement('strong');
strong.textContent = cursor.value.albumTitle;
listItem.append(strong,", ",cursor.value.year);
list.appendChild(listItem);

console.log(cursor.direction);
Expand Down
91 changes: 38 additions & 53 deletions indexeddb-examples/idbindex/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ window.onload = function () {
for (let i = 0; i < thControls.length; i++) {
const activeThead = thControls[i];
activeThead.onclick = function (e) {
activeIndex = e.target.innerHTML;
activeIndex = e.target.textContent;
if (activeIndex == "ID") {
displayDataByKey();
} else {
Expand All @@ -190,39 +190,31 @@ window.onload = function () {
}

function displayDataByKey() {
tableEntry.innerHTML = "";
tableEntry.replaceChildren();
const transaction = db.transaction(["contactsList"], "readonly");
const objectStore = transaction.objectStore("contactsList");

objectStore.openCursor().onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
const tableRow = document.createElement("tr");
tableRow.innerHTML =
"<td>" +
cursor.value.id +
"</td>" +
"<td>" +
cursor.value.lName +
"</td>" +
"<td>" +
cursor.value.fName +
"</td>" +
"<td>" +
cursor.value.jTitle +
"</td>" +
"<td>" +
cursor.value.company +
"</td>" +
"<td>" +
cursor.value.eMail +
"</td>" +
"<td>" +
cursor.value.phone +
"</td>" +
"<td>" +
cursor.value.age +
"</td>";
const fields = [
cursor.value.id,
cursor.value.lName,
cursor.value.fName,
cursor.value.jTitle,
cursor.value.company,
cursor.value.eMail,
cursor.value.phone,
cursor.value.age
];

fields.forEach(value => {
const td = document.createElement("td");
td.textContent = value;
tableRow.appendChild(td);
});

tableEntry.appendChild(tableRow);

cursor.continue();
Expand All @@ -233,7 +225,7 @@ window.onload = function () {
}

function displayDataByIndex(activeIndex) {
tableEntry.innerHTML = "";
tableEntry.replaceChildren();
const transaction = db.transaction(["contactsList"], "readonly");
const objectStore = transaction.objectStore("contactsList");

Expand Down Expand Up @@ -268,31 +260,24 @@ window.onload = function () {
const cursor = event.target.result;
if (cursor) {
const tableRow = document.createElement("tr");
tableRow.innerHTML =
"<td>" +
cursor.value.id +
"</td>" +
"<td>" +
cursor.value.lName +
"</td>" +
"<td>" +
cursor.value.fName +
"</td>" +
"<td>" +
cursor.value.jTitle +
"</td>" +
"<td>" +
cursor.value.company +
"</td>" +
"<td>" +
cursor.value.eMail +
"</td>" +
"<td>" +
cursor.value.phone +
"</td>" +
"<td>" +
cursor.value.age +
"</td>";

const values = [
cursor.value.id,
cursor.value.lName,
cursor.value.fName,
cursor.value.jTitle,
cursor.value.company,
cursor.value.eMail,
cursor.value.phone,
cursor.value.age
];

values.forEach(val => {
const td = document.createElement("td");
td.textContent = val;
tableRow.appendChild(td);
});

tableEntry.appendChild(tableRow);

cursor.continue();
Expand Down
Loading