如何将Jquery .html()函数改为getElementById?

oknrviil  于 2022-12-02  发布在  jQuery
关注(0)|答案(1)|浏览(180)

如何将Jquery .html()函数改为getElementById?
我有一个小的js代码,用于从div中搜索文本,它在.html函数中返回值,但是它不太好,因为我不能在任何我想显示的地方显示这个文本。我想在div或span中显示结果。看看我的输出代码;

<!-- 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>

我想在.html之外和“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("");
  }
});

我想要这样的东西:

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

我想在某个div中显示输出,而不是在.html()函数中。这样我就可以把div放在任何我想放的地方。

1zmg4dgp

1zmg4dgp1#

只需将您的$(“.len_span”).html更改为$(“#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>

相关问题