Web developer specializing in React, Vue, and front end development.
To fix the "Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. " error when developing React apps, we should make sure we don’t nest div elements within p elements.
For instance, we instead of writing:
<p>
<div></div>
</p>
which is invalid HTML, we write:
<p></p>
<div></div>
Browsers will fix the HTML when the code is rendered, which will make React’s virtual DOM different from what’s rendered.
Sometimes, we want to set custom validation message for HTML5 form required attribute with JavaScript.
In this article, we’ll look at how to set custom validation message for HTML5 form required attribute with JavaScript.
To set custom validation message for HTML5 form required attribute with JavaScript, we call the setCustomValidity method.
For instance, we write
<input
type="text"
id="username"
required
placeholder="Enter Name"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"
/>
to call setCustomValidity with the validation message we want to show.
oninput is run as we type and oninvalid is run when the input is invalid.
To set custom validation message for HTML5 form required attribute with JavaScript, we call the setCustomValidity method.
Sometimes, we want to get value of selected radio button with JavaScript.
In this article, we’ll look at how to get value of selected radio button with JavaScript.
To get value of selected radio button with JavaScript, we use querySelector.
For instance, we write
const value = document.querySelector('input[name="rate"]:checked').value;
to select the radio button with name rate that’s selected with :checked and querySelector.
And we get its value attribute value with value.
To get value of selected radio button with JavaScript, we use querySelector.
Sometimes, we want to create a style tag tag with JavaScript.
In this article, we’ll look at how to create a style tag tag with JavaScript.
To create a style tag tag with JavaScript, we call createElement.
For instance, we write
const ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.head.appendChild(ss);
to call createElement to create a link element.
Then we set its attributes by setting its properties.
Next, we call document.head.appendChild to append the link element as the last child of the head element.
To create a style tag tag with JavaScript, we call createElement.
Sometimes, we want to change website favicon dynamically with JavaScript.
In this article, we’ll look at how to change website favicon dynamically with JavaScript.
To change website favicon dynamically with JavaScript, we create a link element.
For instance, we write
const link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement("link");
link.rel = "icon";
document.head.appendChild(link);
}
link.href = "https://example.com/favicon.ico";
to select the link element with querySelector.
If it doesn’t exist, we create it with createElement.
And then we set its href property to the favicon’s URL.
To change website favicon dynamically with JavaScript, we create a link element.