bendtherules/UiQuestions
1
0
Fork 0
mirror of https://github.com/bendtherules/UiQuestions.git synced 2026-08-18 13:52:50 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

create-modify-element - Shorten code samples

Browse Source
This commit is contained in:
bendtherules
2020-10-15 22:43:26 +05:30
parent b2838159cc
commit 4d7a23c1c7
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/create-modify-element.mdx
+11 -10
View File
@@ -16,10 +16,10 @@ import Accordion from "../components/Accordion"
This method returns the **first element that matches the CSS selector**. If no match is found, it returns `null`. This method returns the **first element that matches the CSS selector**. If no match is found, it returns `null`.
```js ```js
var ele = document.querySelector(selector); document.querySelector(selector);
// Ex. - body > div.container > div.box + div.box // Ex. - body > div.container > div.box
document.querySelector(".box"); // returns first div.box document.querySelector(".box"); // returns div.box
document.querySelector(".not-found"); // null document.querySelector(".not-found"); // null
``` ```
@@ -51,9 +51,9 @@ Here, the NodeList is static - meaning any changes in the DOM later does not aff
::: :::
```js ```js
var paragraphs = document.querySelectorAll("p"); var paras = document.querySelectorAll("p");
for (var p of paragraphs) { for (var p of paras) {
p.className = "note"; p.className = "note";
} }
``` ```
@@ -69,7 +69,7 @@ The `document.createElement` method creates a new HTML element, taking the tag n
To set attributes and add the element to DOM, look at `.setAttribute` and `.appendChild` below. To set attributes and add the element to DOM, look at `.setAttribute` and `.appendChild` below.
```js ```js
var newEle = document.createElement("div") // creates <div/> document.createElement("div") // creates <div/>
``` ```
<Accordion title="Related"> <Accordion title="Related">
@@ -78,10 +78,10 @@ var newEle = document.createElement("div") // creates <div/>
`createTextNode` method takes a string as input and returns a new TextNode. `createTextNode` method takes a string as input and returns a new TextNode.
```js ```js
var newEle = document.createElement("div") var ele = document.createElement("div")
var newText = document.createTextNode("Hello world") var newText = document.createTextNode("Hello world")
newEle.appendChild(newText) // <div>Hello world</div> ele.appendChild(newText) // <div>Hello world</div>
``` ```
</Admonition> </Admonition>
</Accordion> </Accordion>
@@ -96,9 +96,10 @@ Every element has a `.setAttribute(name, value)` method, which can add/modify a
`value` - value of the attribute. Ex- `"text"`. `value` - value of the attribute. Ex- `"text"`.
```js ```js
var newInput = document.createElement("input") var ele = document.createElement("input")
newInput.setAttribute("type", "text") // <input type="text"/> ele.setAttribute("type", "text")
// creates - <input type="text"/>
``` ```
[Read on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) [Read on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)