CODEWITHSUNDEEP
javascripthtml
Jeremy
Jeremy

Reputation: 1675

Can't append Button element to li parent

I'm trying to append a button into a li item with the .appendChild method, but it doesn't work. I also tried altering the parent's inner HTML.

let inputElement = document.querySelector('#input');
let listItem = document.createElement('li');
listItem.className = 'todo-item'

let checkButton = document.createElement('button');
checkButton.className = 'checkButton' 

//? When adding the child element, it is only added after the text content is defined.
listItem.appendChild(checkButton); 
listItem.textContent = inputElement.value;
<div class="app">
    <div class="list">
        <h1> My Todo List </h1>
        <ul class="todo-list" id="list">
            <div class="list-row">
                <li class="todo-item"><button class="checkButton"></button> Test Item </li>
            </div>
            <div class="list-row">
                <li class="todo-item"><button class="checkButton"></button> Test Item </li>
            </div>
        </ul>
    <input id="input" class="list-input" type="text" placeholder="Next I need to...">
    </div>
</div>

Here's the current result browser screen capture

If I modify the order in which the child is appended, the button DOES show up but it's not the best result

//? When adding the child element, it is only added after the text content is defined.
listItem.textContent = inputElement.value;
listItem.appendChild(checkButton);

browser screen capture v2

Upvotes: 1

Views: 859

Answers (3)

Mamun
Mamun

Reputation: 68933

Setting the textContent property will reset the whole li element, thus removes the previously added button, try with insertAdjacentHTML().

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element.

let inputElement = document.querySelector('#input');
let listItem = document.createElement('li');
listItem.className = 'todo-item'

let checkButton = document.createElement('button');
checkButton.className = 'checkButton' 

listItem.appendChild(checkButton); 
listItem.insertAdjacentHTML('beforeend',inputElement.value);

document.querySelector('#list').appendChild(listItem);
<div class="app">
  <div class="list">
      <h1> My Todo List </h1>
      <ul class="todo-list" id="list">
          <div class="list-row">
              <li class="todo-item"><button class="checkButton"></button> Test Item </li>
          </div>
          <div class="list-row">
              <li class="todo-item"><button class="checkButton"></button> Test Item </li>
          </div>
      </ul>
  <input id="input" class="list-input" type="text" placeholder="Next I need to...">
  </div>
</div>

Upvotes: 1

Thomas Ludewig
Thomas Ludewig

Reputation: 725

First do not be so greedy with the ";" signs ;) This happens cause the whole thing is wrong :) Look, This would and will work perfectly in plain html:

<ul>
    <li><input type="radio" name="gender" value="male"> Male</li>
    <li><input type="radio" name="gender" value="female"> Female</li>
    <li><input type="radio" name="gender" value="other"> Other  </li>
    ....
</ul>

And now we do exactly the same in Javascript.

var ipb=document.createElement("INPUT")    //Not button ! Forget that this 
                                          // button tag 
                                         // even exists
    ipb.setAttribute("id","ibp_0");     //always a good idea
    ipb.setAttribute("name","gender"); //if its inside a form you want to use
                                      //and a must have for radio buttons *)'
    ipb.setAttribute("type","radio");// or checkbutton or input - what you 
                                    //     want for a input type
    ipb.setAttribute("value","male");

         var txt = document.createTextNode("Male");
         ipb.appendChild(txt);

     // and now you can
     LIST.appendChild(ipb); //the formaly created <UL> Node for sure

As you can see its the same thing like writing the html version just in a different syntax. There is no magic thing in behind which will do something for you.

The text node is not a perfect idea. I would use a label for that. Or a additional Label. A label has a "FOR" attribute which i really suggest to use if you go that way. But this typing i let up to ou :) Have fun !

*) radio buttons. They know that they belong together by the name.

Upvotes: 1

Adam Hess
Adam Hess

Reputation: 1449

You've created the element, for listItem but you've never actually added it to the DOM.

You need to append or insert the listItem before you try to add the checkbox.

Upvotes: 0

Related Questions