From fcd82532291093fa81e9c92e60e7006b0db321fb Mon Sep 17 00:00:00 2001 From: Hamza Khan Lodhi <134397582+hamzalodhi2023@users.noreply.github.com> Date: Wed, 21 Feb 2024 14:33:11 +0500 Subject: [PATCH] JS-insert.html --- JS-insert.html | 617 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 3 + 2 files changed, 620 insertions(+) create mode 100644 JS-insert.html diff --git a/JS-insert.html b/JS-insert.html new file mode 100644 index 0000000..6d42f65 --- /dev/null +++ b/JS-insert.html @@ -0,0 +1,617 @@ + + + + + + JS insert + + + +

JS insert

+
+

insertAdjacentElement()

+ +

+ The insertAdjacentElement() method inserts a an + element into a specified position. +

+ +

Legal positions:

+ + + + + + + + + + + + + + + + + + + + + + + + +
+

Value

+ 		+

Description

+
+

afterbegin

+ 		+

After the beginning of the element (first child)

+
+

afterend

+ 		+

After the element

+
+

beforebegin

+ 		+

Before the element

+
+

beforeend

+ 		+

Before the end of the element (last child)

+
+ +

Syntax

+ + 
element.insertAdjacentElement(position, element)
+                  or
+node.insertAdjacentElement(position, element)
+
+ +

Parameters

+ + + + + + + + + + + + + + + + +
ParameterDescription
position + Required.
+ A position relative to the element:
+ afterbegin
+ afterend
+ beforebegin
+ beforeend +
elementThe element to insert.
+ +
+

insertAdjacentHTML()

+ +

+ The insertAdjacentHTML() method inserts HTML code + into a specified position. +

+ +

Legal positions:

+ + + + + + + + + + + + + + + + + + + + + + + + +
ValueDescription
afterbeginAfter the beginning of the element (first child)
afterendAfter the element
beforebeginBefore the element
beforeendBefore the end of the element (last child)
+ +

Syntax

+ + 
element.insertAdjacentHTML(position, html)
+                or
+node.insertAdjacentHTML(position, html)
+ +

Parameters

+ + + + + + + + + + + + + + + + + +
ParameterDescription
position + Required.
+ A position relative to the element:
+ afterbegin
+ afterend
+ beforebegin
+ beforeend +
htmlThe HTML to insert.
+ +

html file

+ 
<!DOCTYPE html>
+<html>
+<head>
+    <title>DOM Navigation</title>
+    <style>
+        #test{
+            background: #ffff00;
+            width: 800px;
+            height: 200px;
+            padding: 10px 10px;
+            margin: 0 auto;
+        }
+    </style>
+</head>
+<body>
+    <div id="test">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur aperiam eos vel consequatur. Delectus voluptas
+            dolorem id exercitationem, ad ipsam consectetur hic ullam provident! Adipisci exercitationem ipsam rerum sunt
+            doloremque magni soluta, delectus maiores, sapiente quasi labore praesentium accusamus earum cum nam saepe qui?
+            Accusamus provident quo perferendis sint sed.</p>
+    </div>
+    <script src="js/dom-create.js"></script>
+</body>
+</html>
+ +

dom-create.js

+ + 
//  insertAdjacentElement Method
+
+var newElement = document.createElement("h2");
+
+var newText = document.createTextNode("This is just element");
+
+newElement.appendChild(newText);
+
+var target = document.getElementById("test");
+
+target.insertAdjacentElement("afterbegin",newElement);
+
+
+//  insertAdjacentHTML Method
+
+var newElement = "<h2>This is just Html</h2>";
+
+var target = document.getElementById("test");
+
+target.insertAdjacentHTML("afterend",newElement);
+
+//  insertAdjacentText Method
+
+var newText = "<h2>This is just Text</h2>";
+
+var target = document.getElementById("test");
+
+target.insertAdjacentHTML("beforeend",newText);
+
+
+
+ + diff --git a/index.html b/index.html index 29b7a57..62be322 100644 --- a/index.html +++ b/index.html @@ -227,6 +227,9 @@

DOM

>JS appendChild & insertBefore +
  • + JS insert +