dom - appendChild is not a function error javascript

Each time I try and submit the text I've inputted, I get an error in my console from my javascript code that says:

Uncaught TypeError: textItem.appendChild is not a function at HTMLFormElement.addItem

const form = document.getElementById('form');
const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  textItem.appendChild(li);
}

body{
  font-family:arial;
  background: #f4f4f4;
}

#header{
  margin:20px 30px;
  background: #2cc36b;
  border-radius: 3px;
  padding:5px;
  text-align:center;
}

#header h1{
  background: #26A65B;
  color:#fff;
  font-size:40px;
  padding:5px;
  width:260px;
  margin:20px auto;
  box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5);
  border-radius: 2px;
}

#header input[type="text"]{
  width:400px;
  padding:10px;
  margin-bottom:15px;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  background: #f4f4f4;
}

#main{
  margin:25px 100px 0 100px;
  border:2px solid #D2D7D3;
  border-radius:3px;
  padding:10px;
}

#main h3{
  margin:10px 10px -2px 30px;
  font-size:30px;
}

#main input[type="text"]{
  margin:10px 2px 8px 30px;
  padding:12px;
  width:150px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background:#f4f4f4;
  color:#111111;
  padding-right:30px;
}

#main input[type="submit"]{
  padding:10px;
  background:#BDC3C7;
  font-size:17px;
  border:none;
  border-radius: 5px;
  color:#001f3f;
}

#main input[type="submit"]:hover{
  cursor: pointer;
}

#main ul{
  list-style: none;
}

#main li{
  padding:15px;
  margin:0 25px 10px 0;
  border:1px solid #BDC3C7;
  border-radius:5px;
}

.delete-btn{
  float:right;
  color:#FF4136;
  font-size:17px;
}

.delete-btn:hover{
  cursor: pointer;
}

<html lang="en">
<head>
  <title> Item Lister </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
  <div id="header">
    <h1> Item Lister </h1>
    <input type="text" placeholder="Search through your items..." id="filterSearch"/>
  </div>
    <div id="main">
      <h3> Add items </h3>
    <form id="form">
      <input type="text" placeholder="Add an item..." id="text-item"/>
      <input type="submit" value="Submit" id="submit"/>
    </form>
      <h3> My items </h3>
      <ul id="item">
        <li class="item-group"> Example 1 <span class="delete-btn">&#x2718;</span> </li>
        <li class="item-group"> Example 2 <span class="delete-btn">&#x2718;</span></li>
      </ul>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

Each time I try and submit the text I've inputted, I get an error in my console from my javascript code that says:

Uncaught TypeError: textItem.appendChild is not a function at HTMLFormElement.addItem

const form = document.getElementById('form');
const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  textItem.appendChild(li);
}

body{
  font-family:arial;
  background: #f4f4f4;
}

#header{
  margin:20px 30px;
  background: #2cc36b;
  border-radius: 3px;
  padding:5px;
  text-align:center;
}

#header h1{
  background: #26A65B;
  color:#fff;
  font-size:40px;
  padding:5px;
  width:260px;
  margin:20px auto;
  box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5);
  border-radius: 2px;
}

#header input[type="text"]{
  width:400px;
  padding:10px;
  margin-bottom:15px;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  background: #f4f4f4;
}

#main{
  margin:25px 100px 0 100px;
  border:2px solid #D2D7D3;
  border-radius:3px;
  padding:10px;
}

#main h3{
  margin:10px 10px -2px 30px;
  font-size:30px;
}

#main input[type="text"]{
  margin:10px 2px 8px 30px;
  padding:12px;
  width:150px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background:#f4f4f4;
  color:#111111;
  padding-right:30px;
}

#main input[type="submit"]{
  padding:10px;
  background:#BDC3C7;
  font-size:17px;
  border:none;
  border-radius: 5px;
  color:#001f3f;
}

#main input[type="submit"]:hover{
  cursor: pointer;
}

#main ul{
  list-style: none;
}

#main li{
  padding:15px;
  margin:0 25px 10px 0;
  border:1px solid #BDC3C7;
  border-radius:5px;
}

.delete-btn{
  float:right;
  color:#FF4136;
  font-size:17px;
}

.delete-btn:hover{
  cursor: pointer;
}

<html lang="en">
<head>
  <title> Item Lister </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
  <div id="header">
    <h1> Item Lister </h1>
    <input type="text" placeholder="Search through your items..." id="filterSearch"/>
  </div>
    <div id="main">
      <h3> Add items </h3>
    <form id="form">
      <input type="text" placeholder="Add an item..." id="text-item"/>
      <input type="submit" value="Submit" id="submit"/>
    </form>
      <h3> My items </h3>
      <ul id="item">
        <li class="item-group"> Example 1 <span class="delete-btn">&#x2718;</span> </li>
        <li class="item-group"> Example 2 <span class="delete-btn">&#x2718;</span></li>
      </ul>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

Here's a link to the codepen - https://codepen.io/anon/pen/bMdWgJ

How can I fix this?

Share Improve this question edited Feb 24, 2019 at 3:35 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Apr 20, 2018 at 11:32 codfish555 962 silver badges15 bronze badges

3 Don't link to some external page. Put the relevant code in the question itself. – Denys Séguret Commented Apr 20, 2018 at 11:33
Check your source for what textItem is and you see you are essentially trying to execute document.getElementById('text-item').value.appendChild() , which is not valid. I think you mean to execute itemList.appendChild instead, possibly? – Nope Commented Apr 20, 2018 at 11:37
1 textItem is a string. You got it from value() of your input field. I don't think you can add a child to a string. – Holger Commented Apr 20, 2018 at 11:39

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

textItem is a string and it doesn't have appendChild() method thus you are getting the error

I think you want to append li to <UL> element thus Use

itemList.appendChild(li);

instead of

textItem.appendChild(li);

const form = document.getElementById('form');
const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  //textItem.appendChild(li);
  itemList.appendChild(li);
}

body{
  font-family:arial;
  background: #f4f4f4;
}

#header{
  margin:20px 30px;
  background: #2cc36b;
  border-radius: 3px;
  padding:5px;
  text-align:center;
}

#header h1{
  background: #26A65B;
  color:#fff;
  font-size:40px;
  padding:5px;
  width:260px;
  margin:20px auto;
  box-shadow: 6px 6px 5px -2px rgba(0,0,0,0.5);
  border-radius: 2px;
}

#header input[type="text"]{
  width:400px;
  padding:10px;
  margin-bottom:15px;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  background: #f4f4f4;
}

#main{
  margin:25px 100px 0 100px;
  border:2px solid #D2D7D3;
  border-radius:3px;
  padding:10px;
}

#main h3{
  margin:10px 10px -2px 30px;
  font-size:30px;
}

#main input[type="text"]{
  margin:10px 2px 8px 30px;
  padding:12px;
  width:150px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background:#f4f4f4;
  color:#111111;
  padding-right:30px;
}

#main input[type="submit"]{
  padding:10px;
  background:#BDC3C7;
  font-size:17px;
  border:none;
  border-radius: 5px;
  color:#001f3f;
}

#main input[type="submit"]:hover{
  cursor: pointer;
}

#main ul{
  list-style: none;
}

#main li{
  padding:15px;
  margin:0 25px 10px 0;
  border:1px solid #BDC3C7;
  border-radius:5px;
}

.delete-btn{
  float:right;
  color:#FF4136;
  font-size:17px;
}

.delete-btn:hover{
  cursor: pointer;
}

<html lang="en">
<head>
  <title> Item Lister </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
  <div id="header">
    <h1> Item Lister </h1>
    <input type="text" placeholder="Search through your items..." id="filterSearch"/>
  </div>
    <div id="main">
      <h3> Add items </h3>
    <form id="form">
      <input type="text" placeholder="Add an item..." id="text-item"/>
      <input type="submit" value="Submit" id="submit"/>
    </form>
      <h3> My items </h3>
      <ul id="item">
        <li class="item-group"> Example 1 <span class="delete-btn">&#x2718;</span> </li>
        <li class="item-group"> Example 2 <span class="delete-btn">&#x2718;</span></li>
      </ul>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

I think you are appending child to wrong item. Append your item to itemList

Code Snippet

 const form = document.getElementById('form');
 const itemList = document.getElementById('item');

form.addEventListener('submit', addItem);

function addItem(e){
  e.preventDefault();
  var textItem = document.getElementById('text-item').value;

  var li = document.createElement('li');
  li.className = 'item-group';
  li.appendChild(document.createTextNode(textItem));
  itemList.appendChild(li);
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

dom - appendChild is not a function error javascript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)