Sometimes, the developer needs to add various elements to the container for different purposes. Furthermore, they may want to append the container elements that are mainly utilized to add data in a file. In such a situation, you can add characters, boolean, strings, integers, and floats, to the data in a program using JavaScript.
This post will explain for appending an element to a container element without inner HTML.
Append HTML to Container Element Without Inner HTML
To append the HTML container element without inner HTML, the “document.getElementById()” and “insertAdjacentHTML()” JavaScript methods are utilized.
Follow the stated procedure for practical demonstration.
Step 1: Create a “div” Container
Initially, create a “div” container by utilizing the “<div>” element and insert a class attribute inside the div opening tag.
Step 2: Make a Button
Then, use the “<button>” tag to create a button and add the following attribute inside:
- The “type” specifies the type of the element. For that purpose, the value of this attribute is set as “submit”.
- “onclick” handler allows the user to call a function and perform an action when an element/button is clicked. The value of “onclick” is set as “addElement()”.
- The “addElement()” function is utilized for the purpose of appending a particular child/element at the end of the vector by enhancing the length of the vector.
- Next, embed text between the “<button>” tag to display on the button.
Step 3: Make Another div and Add Data
Then, utilize the “<div>” tag to make another div and specify an id attribute to assign a particular id to the div element. Add paragraph tag and define the data:
<button type="submit" onclick="addElement()">Append Element</button>
<div id="more-element">
<p>Element 1</p>
<p>Element 2</p>
</div>
</div>
Output
Step 4: Style “div” Container
Now, access the main div container with the help of the class name “.main-content” and apply the CSS properties mentioned in the below snippet:
text-align: center;
margin: 30px 70px;
border: 4px solid blue;
padding: 50px;
background: rgb(247, 212, 205);
}
Here:
- “text-align” property is utilized for setting the alignment of the text.
- “margin” allocates a space outside of the defined boundary.
- “border” specifies a boundary around the defined element.
- “padding”add blank space inside the element in a boundary.
- “background” property sets a color at the element’s backside.
Output
Step 6: Style Button Element
Access the button with its name and apply the below listed CSS properties:
background: rgba(84, 155, 214, 0.1);
border: 3px solid rgb(5, 75, 224);
border-radius: 6px;
color: rgb(6, 63, 250);
transition: all .5s;
line-height: 50px;
cursor: pointer;
outline: none;
font-size: 40px;
padding: 0 20px;
}
According to the above code snippet:
- Apply “border” and “background” colors on the button element by assigning the specific values.
- “border-radius” property is utilized for setting the curves of the button in a round shape.
- “color” property defines a color for the added text inside the element.
- “transition” provides a method for controlling the animation speed when changing CSS properties
- “line-height” property sets the height of a line box. It is utilized for setting the distance inside lines of text.
- “cursor” is used to allocate the mouse cursor for displaying when a pointer is over an element.
- “outline” is utilized for adding/drawing a line around elements, for making the element stand out.
- “font-size” specifies the particular size for the text in an element.
Output
Step 7: Apply “:hover” on Button
Access the button element along with the “:hover” pseudo-class that is utilized for selecting elements when users mouse over them:
color: rgba(255, 255, 255, 1);
background: rgb(16, 17, 68);
}
Then, set the “color” and “background” of the button by applying these properties.
Step 8: Style Paragraph Element
Access the paragraph by utilizing the “p”:
font-size: 20px;
font-weight: bold;
}
Here, apply the “font-size” and “font-weight” properties.
Output
Step 9: Append HTML to Container Element
To append the HTML to the container element, add the “<script>” tag and then follow the given instructions:
- Initialize a variable as “ElementNumber” and assign the value to this variable as “3”.
- Access the function with the name “addElement()” that is utilized for the purpose of appending a particular element at the end of the vector by enhancing the length/size of the vector.
- Then, initialize the variable “parent”
- The value “getElementById()” only handle a single name at a time and returns one node instead of a complete array of nodes
- For a new element, insert a variable and assign the value as the element in the “<p>” tag along with the element number.
- The “insertAdjacentHTML()” method is used for adding HTML code in a particular position.
- Lastly, “ElementNumber++” is utilized to increase the element inside the container.
var ElementNumber = 3;
function addElement() {
var parent = document.getElementById('more-element');
var newElement = '<p>Element' + ElementNumber + '</p>';
parent.insertAdjacentHTML('beforeend', newElement);
ElementNumber++;
}
</script>
It can be observed that the element has been appended to the container element as per the click:
You have learned about the easiest method for appending the HTML to the container element without the inner HTML.
Conclusion
To append the HTML to the container element without inner HTML, the user can utilize the JavaScript function. First, initialize a variable as “ElementNumber” and value “document.getElementById()” only supports one name at a time and only returns a single node, not an array of nodes. Then, “insertAdjacentHTML()” method inserts HTML code into a specified position. This post is all about appending the HTML to the container element without the inner HTML.
