add a button using javascript to an existing DIV

Question

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 ?

use `appendChild` . BTW this is a hyperlink styled as button. — Niladri, Apr 13 '18 at 15:12
Have you searched any of the parts you need to do? i.e: [**How-do-i-create-a-link-using-javascript**](https://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript) that also applies to the `span` you then can append to the anchor before appending the anchor to the `div`. Search how to add a class to an element in JavaScript for those details., Its all there. Also check MDN for [**appendChild**](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) - [**classList**](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) etc.. — Nope, Apr 13 '18 at 15:15
Possible duplicate of [How do I create a link using javascript?](https://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript) — Nope, Apr 13 '18 at 15:16

score 8 · Answer 1 · answered Apr 13 '18 at 15:52

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>

score 4 · Answer 2 · answered Apr 13 '18 at 15:33

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>

Luca Kiebel · Answer 3 · 2018-04-13T15:25:02.277

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>

Could you please explain your downvote? I am happy to change anything wrong and to learn for the future... — Luca Kiebel, Apr 13 '18 at 15:19

score 0 · Answer 4 · answered Apr 13 '18 at 15:15

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);

score 0 · Answer 5 · answered Apr 13 '18 at 15:24

<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.

add a button using javascript to an existing DIV

5 Answers5

Linked