title: Can not find new elements after javascript append using chrome webdriver
body: <p>Here's the simple HTML generated from a c# dotnet core asp pages, application.  I'm trying to get the number of input boxes from colorList div using a webdriver test.  The initial count of two  works, but once i simulate the clicking the button labeled "+" i still only get two, where i expected to get three.  I've tried all kinds of different waits both implicit and explicit, but can't seem to get it to work.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Home page - SeleniumWebTest&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container body-content"&gt;
          &lt;body&gt;
          &lt;form method="post" id="Form" action="/?handler=saveall"&gt;
              &lt;div&gt;&lt;h4&gt;Colors&lt;/h4&gt;&lt;button type="button" onclick="CreateColor();" value="create" class="btn-sm"&gt;+&lt;/button&gt;&lt;/div&gt;
              &lt;div class="indent" id="colorlist"&gt;
                      &lt;input value="Red" type="text" id="Colors" name="Colors" /&gt;&lt;br /&gt;
                      &lt;input value="Blue" type="text" id="Colors" name="Colors" /&gt;&lt;br /&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;div&gt;
                  &lt;h1&gt;More Stuff&lt;/h1&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;button type="submit" value="SaveAll" class="btn btn-primary"&gt;Save All&lt;/button&gt;
          &lt;input name="__RequestVerificationToken" type="hidden" value="CfDJ8Ps9gVily6NMr7L9g0lJf0cQzaqUzEq26TUrHCT4rH1GQIY0QLmjjc6cnQBE8aBvQlWdXAQZ2ub08pm2yIMWkUICO51XkWH6d11pf7y3pr3HwqRgBkiFdpaHSFYQsJsWdLba01RGCL8yYsUad9Vn2JQ" /&gt;&lt;/form&gt;
  &lt;/body&gt;
  
  
  &lt;script type="text/javascript"&gt;
      function CreateColor() {
  
          var form = document.getElementById("colorlist");
          var input = document.createElement("input");
          input.type = "text";
          input.id = "ColorId";
          input.name = "ColorName";
          form.appendChild(input);
          linebreak = document.createElement("br");
          form.appendChild(linebreak);
      };
  &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my test</p>
  
  <pre><code>        [Fact]
          public void ColorTest()
          {
              var _driver = new ChromeDriver();
  
              _driver.Navigate().GoToUrl("https://localhost:44394/");
              Assert.Equal("Home page - SeleniumWebTest", _driver.Title);
  
              var colorInputs = _driver.FindElements(By.Id("Colors"));
              Assert.Equal(2, colorInputs.Count);
  
              var plusButton = _driver.FindElement(By.XPath("//button[text()='+']"));
              plusButton.Click();
  
              var colorInputs2 = _driver.FindElements(By.Id("Colors"));
              Assert.Equal(colorInputs.Count+1,colorInputs2.Count); // &lt;-- Fails
  
              _driver.Close();
              _driver.Quit();
          }
  
  </code></pre>