create-modify-element - Shorten code again

This commit is contained in:
2020-10-15 22:47:30 +05:30
parent 4d7a23c1c7
commit 446e1447fd
+8 -6
View File
@@ -18,8 +18,8 @@ This method returns the **first element that matches the CSS selector**. If no m
```js ```js
document.querySelector(selector); document.querySelector(selector);
// Ex. - body > div.container > div.box // Ex. - .container > .box
document.querySelector(".box"); // returns div.box document.querySelector(".box"); // returns .box
document.querySelector(".not-found"); // null document.querySelector(".not-found"); // null
``` ```
@@ -28,7 +28,7 @@ document.querySelector(".not-found"); // null
This method is also available on all DOM nodes. If you want to look within a specific element, this is very useful. This method is also available on all DOM nodes. If you want to look within a specific element, this is very useful.
```js ```js
// Example - div.outer > div.inner // Example - .outer > .inner
outerEle.addEventListener((ev) => { outerEle.addEventListener((ev) => {
var innerEle = ev.target.querySelector(".inner"); var innerEle = ev.target.querySelector(".inner");
}); });
@@ -69,7 +69,8 @@ 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
document.createElement("div") // creates <div/> document.createElement("div")
// creates <div/>
``` ```
<Accordion title="Related"> <Accordion title="Related">
@@ -81,7 +82,8 @@ document.createElement("div") // creates <div/>
var ele = document.createElement("div") var ele = document.createElement("div")
var newText = document.createTextNode("Hello world") var newText = document.createTextNode("Hello world")
ele.appendChild(newText) // <div>Hello world</div> ele.appendChild(newText)
// <div>Hello world</div>
``` ```
</Admonition> </Admonition>
</Accordion> </Accordion>
@@ -99,7 +101,7 @@ Every element has a `.setAttribute(name, value)` method, which can add/modify a
var ele = document.createElement("input") var ele = document.createElement("input")
ele.setAttribute("type", "text") ele.setAttribute("type", "text")
// creates - <input type="text"/> // <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)