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

Merge branch 'main' of https://github.com/bendtherules/UiQuestions into main

Browse Source
This commit is contained in:
bendtherules
2020-10-19 10:28:51 +05:30
parent 69a116897d db89885ace
commit 69b251d708
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/create-modify-element.mdx
+13 -13
View File
@@ -30,7 +30,7 @@ document.querySelector(".not-found"); // null
```js ```js
// Example - .outer > .inner // Example - .outer > .inner
outerEle.addEventListener((ev) => { outerEle.addEventListener((ev) => {
var innerEle = ev.target.querySelector(".inner"); let innerEle = ev.target.querySelector(".inner");
}); });
``` ```
</Admonition> </Admonition>
@@ -53,9 +53,9 @@ Here, the NodeList is static - meaning any changes in the DOM later does not aff
::: :::
```js ```js
var paras = document.querySelectorAll("p"); let paras = document.querySelectorAll("p");
for (var p of paras) { for (let p of paras) {
p.className = "note"; p.className = "note";
} }
``` ```
@@ -79,8 +79,8 @@ document.createElement("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 ele = document.createElement("div") let ele = document.createElement("div")
var newText = document.createTextNode("Hello world") let newText = document.createTextNode("Hello world")
ele.appendChild(newText) ele.appendChild(newText)
// <div>Hello world</div> // <div>Hello world</div>
@@ -100,7 +100,7 @@ It sets a attribute on the current element.
`value` - value of the attribute. Ex- "text". `value` - value of the attribute. Ex- "text".
```js ```js
var ele = document.createElement("input") let ele = document.createElement("input")
ele.setAttribute("type", "text") ele.setAttribute("type", "text")
// <input type="text"/> // <input type="text"/>
@@ -115,8 +115,8 @@ ele.setAttribute("type", "text")
It inserts a new element as the last child of the parent element. It inserts a new element as the last child of the parent element.
```js ```js
var eleDiv = document.createElement("div") let eleDiv = document.createElement("div")
var eleH1 = document.createElement("h1") let eleH1 = document.createElement("h1")
eleDiv.appendChild(eleH1) eleDiv.appendChild(eleH1)
// <div><h1></h1></div> // <div><h1></h1></div>
@@ -184,10 +184,10 @@ This method inserts a new child element before another child within a parent.
// To add a new <li> above "Zebra" // To add a new <li> above "Zebra"
var parent = document.querySelector("ul") let parent = document.querySelector("ul")
var ref = document.querySelector("li:last-child") let ref = document.querySelector("li:last-child")
var newEle = document.createElement("li") let newEle = document.createElement("li")
parent.insertBefore(newEle, ref) parent.insertBefore(newEle, ref)
``` ```
@@ -218,12 +218,12 @@ Because fragment is not rendered, making changes to it doesn't cause any perform
**Example** - **Example** -
```js ```js
var fragment = document.createDocumentFragment() let fragment = document.createDocumentFragment()
// Insert / modify elements in fragment // Insert / modify elements in fragment
// in dom, <div class="outer"/> // in dom, <div class="outer"/>
var outerEle = document.querySelector(".outer") let outerEle = document.querySelector(".outer")
outerEle.appendChild(fragment) outerEle.appendChild(fragment)
// This will remove all content from fragment and // This will remove all content from fragment and