Append div in button on click Javascript

Question

Hi how to append div inside button on click this is my JavaScript:

function addLoader() {
    var div = document.createElement('div');
    div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
    var test01 = document.createElement('button');
    test01.appendChild(div);
    console.log(test01);
}

I want to add innerHTML inside button tags on click

<button onclick="addLoader(this);">testt </button>

It must be like this when function is finish :

<button>testt <div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div> </button>

brk · Accepted Answer · 2016-04-27 14:17:20Z

1

HTML

// Added id attribute
<button onclick="addLoader();" id = "test01">testt </button>

JS

function addLoader() {
    var _div = document.createElement('div');
    _div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
    //append _div to button
    document.getElementById("test01").appendChild(_div);

}

Working jsfiddle

EDIT

This will append element to any button call addLoader on click

function addLoader(elem) {
        var _div = document.createElement('div');
        _div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
        elem.appendChild(_div);
    }

Updated jsfiddle

edited Apr 27, 2016 at 14:17

answered Apr 27, 2016 at 14:05

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Edin Puzic Over a year ago

Can I do this without using any ID class? just button tag?

brk Over a year ago

You can do that but it will be complex, reason is there can be multiple button in your page. Do you want to add same DOM element inside other button also?

Edin Puzic Over a year ago

Yes but jos on buttons that have onclick function

brk Over a year ago

@EdinPuzic updated the answer.Please check updated jsfiddle

0xdw · Accepted Answer · 2016-04-27 14:00:43Z

1

var btn = document.getElementById("addLoader");

if (btn) {
  btn.addEventListener('click', addLoader, false);
}

function addLoader() {
  var div = document.createElement('div');
  div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
  this.appendChild(div);
}

<button id="addLoader">Test</button>

answered Apr 27, 2016 at 14:00

0xdw

3,8522 gold badges29 silver badges44 bronze badges

Comments

Francisco Romero · Accepted Answer · 2016-04-27 13:59:48Z

0

You just need one more line of code. The variable test01 is created in memory but not added to the DOM. You must append this new element to the DOM (ie. document.appendChild(test01))

edited Apr 27, 2016 at 13:59

Francisco Romero

13.3k23 gold badges100 silver badges173 bronze badges

answered Apr 27, 2016 at 13:57

Rob Brander

3,7831 gold badge22 silver badges33 bronze badges

Collectives™ on Stack Overflow

Append div in button on click Javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related