【发布时间】：2022-12-01 15:35:58
【问题描述】：
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("");
}
});
我想要这样的东西：
document.getElementById("plus").innerHTML =
"Total " + $(this).find(".my-pp-highlight").length + " Result Found.";
我想在某个 div 中显示我的输出，而不是在 .html() 函数中。这样我就可以将 div 放在任何我想要的地方。
【问题讨论】：
标签： javascript html jquery input