diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx index 64a7aaf..67d6d83 100644 --- a/docs/create-modify-element.mdx +++ b/docs/create-modify-element.mdx @@ -18,8 +18,8 @@ This method returns the **first element that matches the CSS selector**. If no m ```js document.querySelector(selector); -// Ex. - body > div.container > div.box -document.querySelector(".box"); // returns div.box +// Ex. - .container > .box +document.querySelector(".box"); // returns .box 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. ```js - // Example - div.outer > div.inner + // Example - .outer > .inner outerEle.addEventListener((ev) => { 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. ```js -document.createElement("div") // creates
+document.createElement("div") +// creates
``` @@ -81,7 +82,8 @@ document.createElement("div") // creates
var ele = document.createElement("div") var newText = document.createTextNode("Hello world") - ele.appendChild(newText) //
Hello world
+ ele.appendChild(newText) + //
Hello world
``` @@ -99,7 +101,7 @@ Every element has a `.setAttribute(name, value)` method, which can add/modify a var ele = document.createElement("input") ele.setAttribute("type", "text") -// creates - +// ``` [Read on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) \ No newline at end of file