How to add and delete the html elements in JavaScript?

Asked 3 years ago
Updated 1 year ago
Viewed 493 times
Ask Question

0

How to add and delete the html elements in JavaScript?

Ravi Vishwakarma
asked by Ravi Vishwakarma , modified by Ravi Vishwakarma in web application

0 Answer

0

To add and delete HTML elements in JavaScript, you can use the DOM (Document Object Model) manipulation methods. Here's how you can achieve it:

Adding HTML Elements: To add HTML elements dynamically using JavaScript, you can follow these steps:

1. Access the parent element to which you want to append the new element. This can be done using various methods like getElementById, getElementsByClassName, getElementsByTagName, etc.

2. Create the new HTML element using the createElement method. Specify the element type by passing the appropriate tag name as an argument.

3. Set any desired attributes or properties for the new element using methods like setAttribute or by directly assigning values to properties.

4. Optionally, add content to the new element using textContent or innerHTML.

5. the new element to the parent element using the appendChild method.

Here's an example that adds a new paragraph element to an existing div with the ID "myDiv":

var parentElement = document.getElementById("myDiv");
var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
parentElement.appendChild(newParagraph);

Deleting HTML Elements: To delete HTML elements using JavaScript, you can follow these steps:

1. Access the element you want to delete. This can be done using the same methods mentioned above.

2. Use the remove method on the selected element to delete it.

Here's an example that deletes an existing paragraph element:

var paragraphElement = document.getElementById("myParagraph");
paragraphElement.remove();

By incorporating JavaScript into a Java Training course in Indore, students can gain a broader understanding of web development and acquire skills that are highly relevant in the industry, especially when building interactive and dynamic web applications.

 

 

Muskan Digital
answered 1 year ago by Muskan Digital

1

Adding and Deleting Elements

In JavaScript, we are create new html elements, append new html elements, replace the elements and remove the existing elements.

  1. document.createElement(element)     Create an HTML element
  2. document.removeChild(element)         Remove an HTML element
  3. document.appendChild(element)         Add an HTML element
  4. document.replaceChild(new, old)          Replace an HTML element
  5. document.write(text)                                 Write into the HTML output stream

document.createElement(element)

It's is used to create the new element and append in the document by using appendChild().

<html>

<body>

<p>Click the button to make a BUTTON element with text.</p>

<button onclick='myFunction()'>Try it</button>

<script>

    function myFunction() {

        // create the new button element

        var btn = document.createElement('BUTTON');

        // change the innerhtml of button 

        btn.innerHTML = 'CLICK ME';

        // appent the button in body section in documents 

        document.body.appendChild(btn);

    }

</script>

</body>

</html>

document.removeChild(element)

this function use to remove elements form document.

<!DOCTYPE html>

<html>

<body>

<ul id='myList'>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<p>Click the button to remove the first item from the list.</p>

<button onclick='myFunction()'>Try it</button>

<script>

function myFunction() {

  var list = document.getElementById('myList');

  list.removeChild(list.childNodes[0]);

}

</script>

</body>

</html>

Ethan Karla
answered 3 years ago by Ethan Karla

Your Answer