How to change Jquery .html() function to getElementById?-CodePudding

How to change Jquery .html() function to getElementById ?

I've a little js code for search text from inside a div, it return values in .html function, but it's not good because I cant show this text in anywhere I want. I want to show the result inside a div or span. Look at my output code;

<!-- Hosted Plugins -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>


<style>
/* Highlight */
.my-pp-highlight {background-color:yellow; color: black}

#my-pp-text-search{
border: 1px solid red; 
height: 50px; 
width: 110px; 
display: block;
font-size: 14px; 
background: #fdc; 
margin-bottom: -20px !important;}

#my-pp-text-search:focus {outline: none !important;}
</style>


<input id='my-pp-text-search' placeholder='Find Words....' type='text'/>
<br>
<span class='len_span'></span>

<div class='my-pp-ppl' id='post-body'>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<h2 id="plus"></h2>

<script type='text/javascript'>
  // Main Highlight
  $(function () {
    $("#my-pp-text-search").bind("keyup change", function () {
      var searchTerm = $(this).val();

      $(".my-pp-ppl").removeHighlight();

      if (searchTerm) {
        $(".my-pp-ppl").highlight(searchTerm);
      }

      //my-pp-highlight
      if (searchTerm.length > 0) {
        $(".my-pp-ppl").each(function (index) {

          $(".len_span").html(
            "Total "  
              $(this).find(".my-pp-highlight").length  
              " Result Found."
          );
 
        });
      } else {
        $(".len_span").html("");
      }
    });
  });

</script>

<script type='text/javascript'>
//<![CDATA[

 (jQuery.fn.highlight = function (a) {
    function b(a, e) {
      var g = 0;

      if (3 == a.nodeType) {
        var h = a.data.toUpperCase().indexOf(e);

        if (h >= 0) {
          var f = document.createElement("span");
          f.className = "my-pp-highlight";

          var c = a.splitText(h);
          c.splitText(e.length);

          var i = c.cloneNode(!0);
          f.appendChild(i), c.parentNode.replaceChild(f, c), (g = 1);
        }
      } else if (
        1 == a.nodeType &&
        a.childNodes &&
        !/(script|style)/i.test(a.tagName)
      )
        for (var d = 0; d < a.childNodes.length;   d)
          d  = b(a.childNodes[d], e);
      return g;
    }

    return this.each(function () {
      b(this, a.toUpperCase());
    });
  }),
    (jQuery.fn.removeHighlight = function () {
      function a(c) {
        for (var d = 0, f = c.childNodes, g = f.length; d < g; d  ) {
          var b = f[d];

          if (1 == b.nodeType) {
            a(b);
            continue;
          }

          if (3 == b.nodeType) {
            var e = b.nextSibling;

            if (null != e && 3 == e.nodeType) {
              var h = b.nodeValue   e.nodeValue;

              (new_node = c.ownerDocument.createTextNode(h)),
                c.insertBefore(new_node, b),
                c.removeChild(b),
                c.removeChild(e),
                d--,
                g--;
            }
          }
        }
      }
      return this.find("span.my-pp-highlight")
        .each(function () {
          var b = this.parentNode;

          b.replaceChild(this.firstChild, this), a(b);
        })
        .end();
    });

 //]]>
</script>

I want to show output outside .html and inside "plus" id.

  if (searchTerm.length > 0) {
    $(".my-pp-ppl").each(function (index) {

      $(".len_span").html(
        "Total "  
          $(this).find(".my-pp-highlight").length  
          " Result Found."
      );

    });
  } else {
    $(".len_span").html("");
  }
});

I wanted something like that:

document.getElementById("plus").innerHTML = 
"Total "   $(this).find(".my-pp-highlight").length   " Result Found.";

I want to show my output inside a certain div, not in .html() function. So that I can put the div anywhere I want.

CodePudding user response：

Just change your $(".len_span").html to $("#plus").html

<!-- Hosted Plugins -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>


<style>
/* Highlight */
.my-pp-highlight {background-color:yellow; color: black}

#my-pp-text-search{
border: 1px solid red; 
height: 50px; 
width: 110px; 
display: block;
font-size: 14px; 
background: #fdc; 
margin-bottom: -20px !important;}

#my-pp-text-search:focus {outline: none !important;}
</style>


<input id='my-pp-text-search' placeholder='Find Words....' type='text'/>
<br>
<span class='len_span'></span>

<div class='my-pp-ppl' id='post-body'>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<h2 id="plus"></h2>

<script type='text/javascript'>
  // Main Highlight
  $(function () {
    $("#my-pp-text-search").bind("keyup change", function () {
      var searchTerm = $(this).val();

      $(".my-pp-ppl").removeHighlight();

      if (searchTerm) {
        $(".my-pp-ppl").highlight(searchTerm);
      }

      //my-pp-highlight
      if (searchTerm.length > 0) {
        $(".my-pp-ppl").each(function (index) {

          $("#plus").html(
            "Total "  
              $(this).find(".my-pp-highlight").length  
              " Result Found."
          );
 
        });
      } else {
        $("#plus").html("");
      }
    });
  });

</script>

<script type='text/javascript'>
//<![CDATA[

 (jQuery.fn.highlight = function (a) {
    function b(a, e) {
      var g = 0;

      if (3 == a.nodeType) {
        var h = a.data.toUpperCase().indexOf(e);

        if (h >= 0) {
          var f = document.createElement("span");
          f.className = "my-pp-highlight";

          var c = a.splitText(h);
          c.splitText(e.length);

          var i = c.cloneNode(!0);
          f.appendChild(i), c.parentNode.replaceChild(f, c), (g = 1);
        }
      } else if (
        1 == a.nodeType &&
        a.childNodes &&
        !/(script|style)/i.test(a.tagName)
      )
        for (var d = 0; d < a.childNodes.length;   d)
          d  = b(a.childNodes[d], e);
      return g;
    }

    return this.each(function () {
      b(this, a.toUpperCase());
    });
  }),
    (jQuery.fn.removeHighlight = function () {
      function a(c) {
        for (var d = 0, f = c.childNodes, g = f.length; d < g; d  ) {
          var b = f[d];

          if (1 == b.nodeType) {
            a(b);
            continue;
          }

          if (3 == b.nodeType) {
            var e = b.nextSibling;

            if (null != e && 3 == e.nodeType) {
              var h = b.nodeValue   e.nodeValue;

              (new_node = c.ownerDocument.createTextNode(h)),
                c.insertBefore(new_node, b),
                c.removeChild(b),
                c.removeChild(e),
                d--,
                g--;
            }
          }
        }
      }
      return this.find("span.my-pp-highlight")
        .each(function () {
          var b = this.parentNode;

          b.replaceChild(this.firstChild, this), a(b);
        })
        .end();
    });

 //]]>
</script>