CODEWITHSUNDEEP
javascript
user10482273
user10482273

Reputation:

unable to insert to Child in Div with JavaScript

I am new to JavaScript and struck at the point where I am getting errors while inserting two elements, one is-page element and second is Button in the span tag, into one div elements.

document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
  var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;

  //list item for page
  var toCreateTheElementOfList = document.createElement('p');

  //button tag
  var toCreateTheButton = document.createElement('button');
  toCreateTheButton.innerText = "Remove";

  //span tag
  var toCreateTheSpanForButton = document.createElement('span');
  toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');

  //div tag
  var toCreateTheElementOfDivContainer = document.createElement('div');
  toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
  toCreateTheElementOfList.innerText = getElementFromTheInput;
  toCreateTheSpanForButton.appendChild(toCreateTheButton);
  toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
  toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);

  document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">

</div>

Upvotes: 0

Views: 54

Answers (2)

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

There is typo error in your code

toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);

it should be 

 toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);


document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
  var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;

  //list item for page
  var toCreateTheElementOfList = document.createElement('p');

  //button tag
  var toCreateTheButton = document.createElement('button');
  toCreateTheButton.innerText = "Remove";

  //span tag
  var toCreateTheSpanForButton = document.createElement('span');
  toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');

  //div tag
  var toCreateTheElementOfDivContainer = document.createElement('div');
  toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
  toCreateTheElementOfList.innerText = getElementFromTheInput;
  toCreateTheSpanForButton.appendChild(toCreateTheButton);
  toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
  toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);

  document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">

</div>

Upvotes: 1

Kiran Shinde
Kiran Shinde

Reputation: 5982

You have a typo mistake in third last line

toCreateTheElementOfLists should be toCreateTheElementOfList

toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);

https://jsfiddle.net/2wsuj0fr/

Upvotes: 1

Related Questions