title: How to get a particular <div>'s data by it's id by using js in android webview?
body: <p>I'm a beginner in web developement so please do excuse me if my question is foolish . Bascially I'm using a <code>html+css+js</code> script for showing a <code>textEditor</code> in <code>webView</code> which is shown without any problem but now problem is how can I get the particular  having id "myEditor"'s content ? Can anyone please help me to fix this issue ?</p>
  
  <p>HTML code:</p>
  
  <pre><code>  &lt;html&gt;
  
  &lt;head&gt;
  
   &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
   awesome/4.7.0/css/font-awesome.css"&gt;
  &lt;/head&gt;
  
   &lt;body&gt;
    &lt;style&gt;
      #editorContainer {
          max-width: 600px;
          margin: auto;
      }
  
      #myEditor {
          border: 1px solid #000;
          padding: 20px;
      }
  
      #toolbar {
          padding: 10px 20px;
          border: 1px solid #d9d9d9;
          background-color: #d9d9d9;
      }
  
      #toolbar button {
          border: 1px solid transparent;
          font-size: 18px;
          cursor: pointer;
          padding: 5px 10px;
          background-color: transparent;
      }
  
      #toolbar button:hover {
          border: 1px solid #2e2e2e;
      }
  &lt;/style&gt;
  &lt;div id="editorContainer"&gt;
      &lt;div id="toolbar"&gt;
          &lt;button onclick="document.execCommand('bold',true,'' )"&gt;&lt;i class="fa fa-bold" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;button onclick="document.execCommand('italic', true, '')"&gt;&lt;i class="fa fa-italic" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;button onclick="document.execCommand('underline', true, '')"&gt;&lt;i class="fa fa-underline" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;button onclick="document.execCommand('strikethrough', true, '')"&gt;&lt;i class="fa fa-strikethrough" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  
      &lt;/div&gt;
      &lt;div id="myEditor" contenteditable="true"&gt;
          &lt;h1&gt;Simple Text Editor&lt;/h1&gt;
          &lt;p&gt;This is a very simple text editor. I will add other features and design elements to it as time goes along.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Based on Codeburst.io Tutorial: https://codeburst.io/how-to-build-your-own-wysiwyg-editor-6002fa3f5ea8 --&gt;
  
  &lt;!--
                Features to add:
                - Save command state
                --&gt;
  &lt;script&gt;
      var onclick = function() {
          var cmd = this.getAttribute('data-role');
          switch (cmd) {
              case 'h1':
              case 'h2':
              case 'p':
                  document.execCommand('formatBlock', false, '&lt;' + cmd + '&gt;');
                  break;
              default:
                  document.execCommand(cmd, false, null);
                  break;
          }
      };
  
      var els = document.querySelectorAll('#editControls a');
  
      Array.prototype.forEach.call(els, function(el) {
          el.addEventListener('click', onclick);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>Now the following code is returning the complete script of the <code>webView</code> but I wonder how to edit this to get only desired result.</p>
  
  <p>Java Code:</p>
  
  <pre><code>webView.evaluateJavascript(
                      "(function() { return ('&lt;html&gt;'+document.getElementsByTagName('html')[0].innerHTML+'&lt;/html&gt;'); })();",
                      new ValueCallback&lt;String&gt;() {
                          @Override
                          public void onReceiveValue(String html) {
  
                          }
                      });
  </code></pre>