In JavaScript, the Attribute object provides properties for working with attributes within the HTML elements. Here is a list of all the Attribute object’s properties.
| Property | Use |
|---|---|
| isId | Yields true if the attribute is an Id; otherwise, yields false |
| name | Gets the name of the attribute |
| value | Gets or sets the value of the attribute |
| specified | Yields true if the attribute has been specified; otherwise, yields false |
Creating and appending elements
To create a new element in an HTML document, use the document.create
Element() method. When you use createElement(), a new beginning and end tag of the type you specify will be created.
Here’s an example of how you can use this method to dynamically create a list in an HTML document from an array.
<html>
<head>
<title>Generating a list</title>
</head>
<body>
<h1>Here are some types of balls</h1>
<ul id=“ballList”>
</ul>
<script>
var typeOfBall = [“basket”, “base”, “soccer”, “foot”, “hand”];
for (i=0; i<typeOfBall.length; i++) {
var listElement = document.createElement(“li”);
listElement.innerHTML = typeOfBall[i];
document.getElementById(“ballList”).appendChild<br/>(listElement);
}
</script>
</body>
</html>
Removing elements
For all the great things that it lets you do with HTML documents, the HTML DOM is not highly regarded by professional JavaScript programmers. It has a number of oddities and tends to make some things more difficult than they should be.
One of the big faults with the DOM is that it doesn’t provide any way to directly remove an element from a document. Instead, you have to tell the DOM to find the parent of the element you want to remove and then tell the parent to remove its child. It sounds a little confusing, but this example should clear it all up.
<html>
<head>
<title>Remove an element</title>
<script>
function removeFirstParagraph(){
var firstPara = <br/>document.getElementById(“firstparagraph”);
firstPara.parentNode.removeChild(firstPara);
}
</script>
</head>
<body>
<div id=“gibberish”>
<p id=“firstparagraph”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie pulvinar ante, a volutpat est sodales et. Ut gravida justo ac leo euismod, et tempus magna posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer non mi iaculis, facilisis risus et, vestibulum lorem. Sed quam ex, placerat nec tristique id, mattis fringilla ligula. Maecenas a pretium justo. Suspendisse sit amet nibh consectetur, tristique tellus quis, congue arcu. Etiam pellentesque dictum elit eget semper. Phasellus orci neque, semper ac tortor ac, laoreet ultricies enim.</p>
</div>
<button onclick=“removeFirstParagraph();”>That’s Gibberish!</button>
</body>
</html>
When you run this code in a browser and press the button, the onclick event calls the removeFirstParagraph() function.
The first thing removeFirstParagraph() does is to select the element that you actually want to remove, the element with the id = “firstparagraph”. Then, the script selects the parent node of the first paragraph. It then uses the removeChild() method to remove the first paragraph.
