How to Append HTML using JavaScript?

Append HTML using JavaScript. Composing HTML code is comfortable, but when it knocks at dynamic modifications over the pages like appending HTML, you will require to use exceptional techniques. JavaScript is a strong language to get such types of jobs done. You can efficiently use JavaScript to add the HTML code inside the template. We will debate this in this write-up.

Append HTML using JavaScript

JavaScript append, there are two simple ways to attach HTML code to a div element.

Using innerHTML attribute property
Inserting adjacent HTML using the insertAdjacentHTML() function

Using innerHTML attribute

To use the innerHTML property to connect code to an element (div), first, choose the element <div> where you desire to append the code. Then, using the += operator on innerHTML, add the code bound as strings.

Here’s the syntax of the attribute.

HTMLelement.innerHTML += "Insert your code here"

Example:- First, we are going to be directing to the HTML element by using the property :

document.getElementById();

Therefore, Now we will create a <div> and put a <h1> tag and a <button> inside it.

<div id="append">
<h1>This is a softcodeon JavaScript Tutorial</h1>
<button onclick="buttonPressed()"> Append Tutorial</button>
</div>

As you can notice, we have assigned an id of ‘append’ to the div tag and placed the text that says ‘Append Tutorial’ inside the button. To run the above code click on the play icon.

JavaScript code:

We have a button connected to a function called ‘buttonPressed()’ in the script. But, we have not specified this function, and this control does not do anything. So, let’s make this function in the script that would put a paragraph in this div and count how many times we have entered this paragraph. Take a look at the following code.

i = 1;
const buttonPressed = () => {
document.getElementById("append").innerHTML +=
"<p>You have append this Tutorial " +i+ " times";
i++;
}

Note: We have completed a counter variable ‘i’. This will be operated to keep a check on how many times have we appended this paragraph inside the div tag.

Using AdjacentHTML method

The insertAdjacentHTML() function can also be used to connect HTML code to a div. This technique comes in convenient when it comes to appending HTML at some particular place. So it takes two parameters in this method:

The area in the document where the code should be entered (‘afterend’, ‘beforeend’, ‘afterbegin’, ‘beforebegin’,).
- afterend – after the closing tag of the HTML element.
- beforeend – inside the HTML element but before the closing tag.
- afterbegin – right after the HTML element said but inside the tag.
- beforebegin – before the HTML element is noted.
You must cover the HTML code you wish to add, inside the quotes.

This is the available syntax of the method

HTMLelement.insertAdjacentHTML(‘<em>LOCATION</em>‘, ‘HTML CODE’);

Let’s use the last example. The same HTML code. Yet, this time the script would be slightly diverse as:

HTML Code:

<div id="append">
<h1>This is a softcodeon Tutorial</h1>
<button onclick="buttonPressed()"> Append Tutorial</button>
</div>

Javascript Code

i=1;
function buttonPressed() {
document.getElementById("test").insertAdjacentHTML("beforebegin",
"<p>Appended " + i + " times Before Div<p>");
i++;
}

Note: We are using the “beforebegin” property to append the <p> tag before the start of the div.

That’s it, you have understood how can we append some HTML code using JavaScript.

Conclusion

There are two ways that you can use to append the HTML code to a webpage. The first way is by using innerHTML while the second mode is by using the AdjacentHTML method.