I would like to insert HTML code to make a "list". I've seen examples of innerHTML but that just replaces the existing code. How can I add more code without replacing the current code?
var addTo = document.querySelector(".activePage")[0];
var addHTML = '
<div id="item1">
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</div>'
addTo.innerHTML(addHTML)'<nav class="activePage"><nav>Use insertAdjacentHtml. Docs - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML.
var addTo = document.querySelector(".activePage");
var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>
addTo.insertAdjacentHtml(addHTML, 'beforeEnd')
'beforeEnd' means it will add right before the end of the element(inside the element).
You have to append to the HTML inside the nav tag instead of replace it with a new value.
var addTo = document.querySelector(".activePage");
var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>';
addTo.innerHTML += addHTML;<nav class="activePage">
<nav>Add your HTML to the existing HTML inside of the target element using +=.
function addNew() {
var addTo = document.querySelectorAll(".activePage")[0];
var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>'
addTo.innerHTML += addHTML
}<nav class="activePage">
<button onclick="addNew()">add</button>
<nav>I believe what you're after is the append feature. https://api.jquery.com/append/ or https://www.w3schools.com/jsref/met_node_appendchild.asp
Below is a jquery example. I have used this example as i think it's easier to understand what's going on at first glance
example:
$(".your_div").append(html_load());
function html_load() {
return '<li class="list"> list item </li>'
}
This will result in the below:
<div class="your_div">
<li>start</li>
</div>
being updated to:
<div class="your_div">
<li>start</li>
<li class="list"> list item </li>
</div>
