On my page I have:
<div id='something'></div>
and I want to append this type of 'button' to it using JS:
<a href="/news_events/"><span class="picon-p-add-news"></span>Read more news</a>
I tried to use document.createElement but I'm not sure how to make it not just append it as text. How do I do this ?
Something like this, where you can pass your element ID and URL through function arguments.
<!DOCTYPE html>
<html>
<head>
<script>
function appendButton(elementId, url){
var buttonEl = document.createElement("a");
buttonEl.href = url;
var buttonTextEl = document.createElement("span");
buttonTextEl.className = "picon-p-add-news";
buttonTextEl.innerText = "Read more news";
buttonEl.appendChild(buttonTextEl);
document.getElementById(elementId).appendChild(buttonEl);
}
</script>
</head>
<body>
<div>
<button id="button">Click to add</button>
<div id='something'></div>
</div>
<script>
document.getElementById("button").addEventListener('click', () => appendButton("something", "/news_events/"));
</script>
</body>
</html>Use document.createElement to create the specified HTML elements. Then you can append those to your #something root element using Node.appendChild function. You can also use Element.innerHTML to gets or sets the HTML markup contained within the element.
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.
const something = document.getElementById('something');
// creating the span element, then add a class attribute
const span = document.createElement('span');
span.setAttribute('class', 'picon-p-add-news');
span.innerHTML = 'span'; // some text to improve visualization
// create the anchor element with the href attribute
const a = document.createElement('a');
a.setAttribute('href', '/news_events/');
// append the span element inside the <a>
a.appendChild(span);
a.innerHTML += 'anchor'; // add extra text for display
// add the <a> element tree into the div#something
something.appendChild(a);#something {
border: 1px solid;
text-align: center;
font-size: 2rem;
}
#something > a {
padding: 8px;
}
.picon-p-add-news {
background: red;
padding: 0 4px;
}<div id="something"></div>Like this? You can use the innerHTML attribute to add HTML inside of an Element
document.getElementById("something").innerHTML += '<a href="/news_events/"><span class="picon-p-add-news"></span>Read more news</a>';<div id='something'></div>Or, if you created this as an Element with createElement, you can use appendChild:
let a = document.createElement("a");
a.setAttribute("href", "/news_events/");
let span = document.createElement("span");
span.setAttribute("class", "picon-p-add-news");
a.appendChild(span);
a.innerHTML += "Read more news";
document.getElementById("something2").appendChild(a);<div id="something2"></div>1) Create a element:
var aEl = document.createElement('a');
aEl.href = "/news_events/"
2) Create span element:
var spanEl = document.createElement('span');
spanEl.classList.add('picon-p-add-news');
3) Append span element to a element
aEl.appendChild(spanEl);
4) Insert text in a element
aEl.insertAdjacentText('beforeend','Read more news');
5) Append whole a tree to you div
var divEl = document.getElementById('something');
divEl.appendChild(aEl);
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to create a P element with some text, and append it to DIV.</p>
<div id="myDIV">
A DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var para = document.createElement("P");
var t = document.createTextNode("This is a paragraph.");
para.appendChild(t);
document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>
Give something like this a try: I used https://www.w3schools.com/jsref/met_document_createelement.asp for reference.
appendChild. BTW this is a hyperlink styled as button.spanyou then can append to the anchor before appending the anchor to thediv. Search how to add a class to an element in JavaScript for those details., Its all there. Also check MDN for appendChild - classList etc..