Javascript: How to create a new div and change background color

Hi I am trying to change the background style color of my div tag when the input matches one of the values in my list that I have, and when it doesn't, I want to create a div tag and append the missing value to the bottom of my list because it did not match.

I searched around and found this thread and used the same methods proposed, but no luck. Here is my attempt with my external js script:

function searchList()
{
  var input = document.getElementById("search").value;
  if ((input == "")||(input == null))
  {
    alert ('Error', 'values missing');
  }
  var childDivs = document.getElementById('courselist').getElementsByTagName('div');

  for (i = 0; i < childDivs.length; i++)
  {
    var childDiv = childDivs[i];
    if (input = childDiv)
    {
       document.getElementById("container").style.backgroundColor = yellow;
       document.getElementById("courselist").style.backgroundColor = yellow;
    }
    else if (input != childDiv)
    {
      var div = document.createElement("div");
      div.innerHTML = input;
      document.courselist.appendChild(div);
    }
  }
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title> Work</title>
        <style type="text/css">
            fieldset {border:0px;}
            #courselist {width:300px;}
            #courselist div {border: 1px black solid;padding:10px;}
        </style>
    </head>
    <body>
         <div id="container">
             <h2>Search a Course</h2>
             <form action="" method="post" onsubmit="return searchList()">
                 <fieldset>
                     Enter the Course Name<br />
                     <input type="text" id="search" size="20" /><br />
                     <input type="submit" value="Search List" id="sub" />
                     <br /><br />
                 </fieldset>
             </form>
             <div id="courselist">
                 <div id="first">&nbsp;</div>
                 <div> Machine Learning </div>
                 <div> Image Processing</div>
                 <div>Design and Analysis of Algorithms</div>
                 <div>Web Programming II </div>
                 <div>Advanced JAVA</div>
                 <div>Pattern Recognition</div>
             </div>
         </div>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

What is correct way to change the style of a div with a function and to append a new div with javascript? Thanks in advance!

Solution

Pass yellow as string, as there is no yellow variable holding value
Test the Element.textContent property, not the element itself or else result will always be false
Break the loop if value is found
Keep a variable to test value is found, else append the element
Use document.getElementById('courselist') instead of document.courselist to access the element
Use return false; in function to prevent form submission

function searchList() {
  var input = document.getElementById("search").value;
  if ((input == "") || (input == null)) {
    return alert('Error', 'values missing');
  }
  var childDivs = document.getElementById('courselist').getElementsByTagName('div');
  var found = false;
  for (i = 0; i < childDivs.length; i++) {
    var childDiv = childDivs[i];
    if (input == childDiv.textContent) {
      document.getElementById("container").style.backgroundColor = 'yellow';
      document.getElementById("courselist").style.backgroundColor = 'yellow';
      found = true;
      break;
    }
  }
  if (!found) {
    document.getElementById("container").style.backgroundColor = '';
    document.getElementById("courselist").style.backgroundColor = '';
    //If you want to remove the `backgroundColor`
    var div = document.createElement("div");
    div.innerHTML = input;
    document.getElementById('courselist').appendChild(div);
  }
  return false;
}

fieldset {
  border: 0px;
}
#courselist {
  width: 300px;
}
#courselist div {
  border: 1px black solid;
  padding: 10px;
}

<div id="container">
  <h2>Search a Course</h2>
  <form action="" method="post" onsubmit="return searchList()">
    <fieldset>
      Enter the Course Name
      <br />
      <input type="text" id="search" size="20" />
      <br />
      <input type="submit" value="Search List" id="sub" />
      <br />
      <br />
    </fieldset>
  </form>
  <div id="courselist">
    <div id="first">&nbsp;</div>
    <div>Machine Learning</div>
    <div>Image Processing</div>
    <div>Design and Analysis of Algorithms</div>
    <div>Web Programming II</div>
    <div>Advanced JAVA</div>
    <div>Pattern Recognition</div>
  </div>
</div>