Add new element into DOM with JavaScript

Question

I am struggling with adding new "button" element into my "list". I was trying to append or someting els but doesn't work. It is not usual ul to li. If you ask why button parent it is form bootstrap list-group

UPDATE JS. IT is now adding "button but not corectlly.

     <div class="list-group">
                    <button type="button" class="list-group-item">
                        <ul class="desc">
                            <li class="t-desc50">Add Device</li>

                            <li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li>
                        </ul>
                    </button>
                    <button type="button" class="list-group-item" id="new-item>
                            <ul class="desc">
                                <li class="t-desc">Lamp</li>
                                <li class="t-desc2">5 kwH</li>
                                <li class="t-desc3"><label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                      </label></li>
                            </ul>
                        </button>
                    <button type="button" class="list-group-item" id="new-item>
                                <ul class="desc">
                                    <li class="t-desc">AC</li>
                                    <li class="t-desc2">5 kwH</li>
                                    <li class="t-desc3"><label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label></li>
                                </ul>
                            </button>
                 </div>

JS

 document.querySelector('.fa-plus').addEventListener('click', addItem

  );

  function addItem() {
var list = document.getElementById("list-group");

var li = document.createElement("button");
li.setAttribute('id', li);
li.appendChild(document.createTextNode(li));
list.appendChild(li);
 }

addEventListener takes a function. It looks like you left out some code? — Bergi
– Bergi, Commented Sep 4, 2017 at 13:06
remove the () in addElement on addeventlistener .Its just perfrom like IIF — prasanth
– prasanth, Commented Sep 4, 2017 at 13:06
You will make confusion for other people calling a button tag li in your javascript. — Nolyurn
– Nolyurn, Commented Sep 4, 2017 at 13:32

Nolyurn · Accepted Answer · 2017-09-04 14:45:43Z

2

If you want to add an element to the dom, you can use :

var element = document.createElement(tagName);

https://developer.mozilla.org/fr/docs/Web/API/Document/createElement

Then append your element.

You can add event listener to element, and add class before if you need.

Comment answer

The code you need is probably something like that :

function addItem() { 
  var list = document.getElementById('list-group')

  //Button
  var button = document.createElement('button');
  button.classList.add("list-group-item");

  //Ul
  var ul = document.createElement('ul');
  ul.classList.add("desc");

  //li
  var liFirst = document.createElement('li');
  var liSecond = document.createElement('li');
  var liThird = document.createElement('li');
  liFirst.innerHTML = "Lamp"
  liSecond.innerHTML = "5 kwH"

  //Label
  var label = document.createElement('label');
  label.classList.add("switch");
  var input = document.createElement('input');
  input.type = 'checkbox';
  var span = document.createElement('span');
  span.classList.add("slider");
  span.classList.add("round");

  label.append(input)
  label.append(span)

  liThird.append(label)

  ul.append(liFirst)
  ul.append(liSecond)
  ul.append(liThird)
  button.append(ul)

  list.append(button)
}

edited Sep 4, 2017 at 14:45

answered Sep 4, 2017 at 13:06

Nolyurn

6085 silver badges20 bronze badges

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

8 Comments

Damien Over a year ago

nearly there but how to add also class of "desc" this class is esential

Nolyurn Over a year ago

element.classList.add("desc"), element must be defined before (var element = document.getElementMyId(...) if element exist in DOM, or var element = document.createElement(...) if you create the element)

Damien Over a year ago

this is working for some how but adding empty "button" without ul and li in it

function addItem() {     var modal = document.getElementById('list-group');      //modalContent is created and inserted in element which id is myModal      modalContent = document.createElement("button");     modalContent.classList.add("list-group-item");     modalContent.classList.add("desc");            modal.append(modalContent) }

Nolyurn Over a year ago

I missunderstand what you needed, i made an edit, hope it will work

Damien Over a year ago

this is what i am geting in console <button class="list-group-item"><ul class="desc"><li></li></ul></button>

|

Mauro Aguilar · Accepted Answer · 2017-09-04 13:07:03Z

0

You need to pass the function as argument instead of calling it:

// wrong:
document.querySelector('.fa-plus').addEventListener('click', addElement());

// right:
document.querySelector('.fa-plus').addEventListener('click', addElement);

addEventListener expects a callback function, if you call the function first, you are sending the result of the function as argument, which is wrong.

You need to pass the addElement function instead, so the addEventListener calls it.

answered Sep 4, 2017 at 13:07

Mauro Aguilar

1,3481 gold badge14 silver badges23 bronze badges

Comments

Damien · Accepted Answer · 2017-09-04 14:51:07Z

0

got it!

function addItem() {
var list = document.getElementById('list-group')
var button = document.createElement('button');
var ul = document.createElement('ul');
var liFirst = document.createElement('li');
var liSecond = document.createElement('li');
var liThird = document.createElement('li');

button.classList.add("list-group-item");
ul.classList.add("desc");
liFirst.classList.add("t-desc")
liSecond.classList.add("t-desc2")
liThird.classList.add("t-desc3")
liFirst.innerText = 'TV'
liSecond.innerText = '5kwh'
liThird.innerHTML = `<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>`

ul.append(liFirst)
ul.append(liSecond)
ul.append(liThird)
button.append(ul)

list.append(button)

}

answered Sep 4, 2017 at 14:51

Damien

2462 gold badges7 silver badges16 bronze badges

2 Comments

Damien Over a year ago

last question how to append to add button not at the end of list but at the beggining?

Nolyurn Over a year ago

Use prepend instead of append

Peter Seliger · Accepted Answer · 2017-09-04 15:20:27Z

There are several semantic errors in both the markup and the code. Firstly, <button type="button" class="list-group-item" id="new-item> misses the closing double quotes. Secondly, one should not use an id twice as the OP's example does with id="new-item. At third addEventListener misses its 3rd argument.

Besides that it will be hard if not impossible to capture any click event on the fa-plus classified <i/> element; one should use the whole button instead ... that's what a button is for.

Additionally one might rethink how to retrieve/query the structure one wants to add the new element to. I would suggest a more generic approach that retrieves the top most group parent from within the structure where the click event did occur, thus one can make use of more than just on list-group classified element.

Having sanitized the code the OP'S given example then might look similar to this ...

function getClosestParentByClassName(elm, className) {
    while (elm && !elm.classList.contains(className)) {
        elm = elm.parentNode;
    }
    return elm;
}

function addItem(evt) {
  //console.log(evt.currentTarget);
    var
        groupParent   = getClosestParentByClassName(evt.currentTarget, 'list-group'),
        itemBlueprint = groupParent && groupParent.querySelector('.list-group-item.new-item'),
        newGroupItem  = (itemBlueprint && itemBlueprint.cloneNode(true)) || createDefaultItem();

  //console.log(groupParent, itemBlueprint, newGroupItem);

    if (newGroupItem) {
        // do whatever needs to be done in order to place the right content into this structure.

        groupParent.appendChild(newGroupItem);
    }
}


getClosestParentByClassName(document.querySelector('.fa-plus'), 'list-group-item').addEventListener('click', addItem, false);


function createDefaultItem() {
    var
        renderContainer = document.createElement('div');

    renderContainer.innerHTML = [
        '<button type="button" class="list-group-item new-item">'
    ,       '<ul class="desc">'
    ,           '<li class="t-desc">@missing t-desc</li>'
    ,           '<li class="t-desc2">@missing t-desc2</li>'
    ,           '<li class="t-desc3">'
    ,               '<label class="switch">'
    ,                   '<input type="checkbox">'
    ,                   '<span class="slider round"></span>'
    ,               '</label>'
    ,           '</li>'
    ,       '</ul>'
    ,   '</button>'

    ].join('');

    return renderContainer.querySelector('button');
}

.as-console-wrapper { max-height: 100%!important; top: 0; }

<div class="list-group">
    <button type="button" class="list-group-item">
        <ul class="desc">
            <li class="t-desc50">Add Device</li>
            <li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li>
        </ul>
    </button>
    <button type="button" class="list-group-item new-item">
        <ul class="desc">
            <li class="t-desc">Lamp</li>
            <li class="t-desc2">5 kwH</li>
            <li class="t-desc3">
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </button>
    <button type="button" class="list-group-item new-item">
        <ul class="desc">
            <li class="t-desc">AC</li>
            <li class="t-desc2">5 kwH</li>
            <li class="t-desc3">
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </li>
        </ul>
    </button>
</div>

Collectives™ on Stack Overflow

Add new element into DOM with JavaScript

4 Answers 4

8 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related