Develop Reference

How to get the text

I have some html to scrape.
<div class="content">
<strong> This is first content </strong> This is second content
<br />
<small>
<p>Something</p>
</small>
</div>
how to get the This is second content with cheerio ?

Using nodeType property, it could solve your problem even if you have text before <strong> tag
<div class="content">
Before first content
<strong> This is first content </strong> This is second content
<br />
<small>
<p>Something</p>
</small>
</div>
Then it could be
var cheerio = require("cheerio")
const $ = cheerio.load('<div class="content">Before first content<strong> This is first content </strong> This is second content<br /><small><p>Something</p></small></div>');
var $outer = $("div.content").contents().filter(function() {
return this.nodeType === 3;
});
console.log($outer.text()); //"Before first content This is second content"
$outer.each(function() {
console.log($(this).text());
});
//"Before first content"
//" This is second content"
Check it here

You can't directly select text nodes. I usually do something like:
$('.content strong')[0].nextSibling.data

Maybe this could help:
<div class="content">
<strong> This is first content </strong> <span class="toBeSelected">This is second content</span>
<br />
<small>
<p>Something</p>
</small>
</div>
After this you can select the text this way.
$('div .toBeSelected').html()

Ideally you should put the 'This is a second content' in span or something else to specify properly to get its content.
do this:
<div class="content">
<strong>This is first content</strong><span>This is second content</span>
<br>
<small>
<p>Something</p>
</small>
</div>
Get it like this
console.log($('.content :nth-child(2)').text())
Working Demo: https://jsfiddle.net/usmanmunir/vg1dqm3L/17/ for you.

I think you can use regex to get the second content.
const cheerio = require('cheerio');
const $ = cheerio.load(`<div class="content">
<strong> This is first content </strong> This is second content
<br />
<small>
<p> Something </p>
</small>
</div>
`);
console.log($('div').html().replace(/\n/g, '').match(/<\/strong>(.*)<br>/)[1])

Wrap elements and content into div

I am requesting data (with jQuery load() function) from another site into my <div class="ajax-container"> to display the gathered data. Data comes with elements AND content (only text, like "born 2007"). I have tried to wrap these with jQuery wrap() and wrapAll method, but it doesn't wrap it correctly. So I want to wrap all elements and content into a single div so I can style it more easily.
How can I achieve this? I need to wrap everything UNTIL certain class is found. I've also tried jQuery parentsUntil() method but that didn't work either. I have no idea how to achieve this so I need your help.
Example data (html that prints to my page):
<div class="container">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
<div class="picture">
...
</div>
</div>
So that's the problem, I have to wrap everything into a div until <div class="picture"> appears.
This did not work:
$(".container").children().nextUntil(".picture").wrapAll("<div></div>");
This would be the desired result:
<div class="container">
<div class="content">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
</div>
<div class="picture">
...
</div>

I believe the best approach is to wrap the inner contents then move "picture":
$(document).ready(function(){
$(".container").wrapInner("<div></div>");
$(".container").append($(".container .picture"));
})
.container > div ~ .picture {color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
<div class="picture">
...
</div>
</div>

About changing the text naviagting through the Dom

I am new to javascript and jquery. I need to navigate through the DOM to change the text of Change Me to best when button btnChangeText is clicked.
//HTML
<div>
<p>
<span>Some Text</span>% <span id="spnTwo">More Text</span>%<span>Thie Text</span>
</p>
<p><span>Max Text</span>= <span>Change Me</span>=<spna>Less Text</spna></p>
</div>
<button id="btnChangeText">Change the Span</button>
//jQuery
$("#btnChangeText").click(function () {
$('.spnTwo').children('span').text("Best");
});
Can you please help to figure out my mistakes. What should i do next to get the text changed.

Look at your jquery. You've used . instead of #. When using ID you should use # to target it. Your code is very messy. Make sure your code is clear.
Hope this helps.
$("#btnChangeText").click(function () {
$('#spnTwo').text("Best");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<span> Some Text</span>% <span>More Text</span>
%<span>Thie Text</span></p>
<p><span>Max Text</span>= <span id="spnTwo">Change Me</span>
= <spna>Less Text</spna></p>
</div>
<button id="btnChangeText">Change the Span</button>

How to display Hidden field value in Paragraph tag

I want to display hiddentfield value in
<p style="color: Red">
Please note that you have <span>
javascript:$("input[id$=hdnCartCount]").val();
</span> more pending orders.
<br />
Click Checkout to proceed!
</p>
How can I display?

Assuming you want this to be dynamic, slight re-arrange your HTML (note the ID I've given to your span):
<p style="color: Red">
Please note that you have
<span id="pendingOrdersCount"></span>
more pending orders.
<br />
Click Checkout to proceed!
</p>
Then you can do:
<script type="text/javascript">
$(function () {
$("#pendingOrdersCount").text($("input[id$=hdnCartCount]").val());
});
</script>
DEMO

Try giving an id to the span and
$("#spanId").text($('#hdnField').val());

Search the document for text to remove more than the tag it's found in

Imagine you had html code like this:
<div id="2761421" class="..." data-attributionline="testtext wrote at..." data-created-at="1342689802000" data-updated-at="1342689802000" data-user-id="36847" >
<div class="subject"> <strong>
<a name="2761421" href="#2761421">wee</a></strong>
</div>
<div class="info">
<div class="author"> author:
<span class="name"> testtext (
we)
</span>
</div>
<div class="date"> date:
<time datetime="dfgdf">dfgdfg
</time>
</div>
</div>
<hr style="clear: both;" />
<div class="text gainlayout"> some text
</div>
<div class="foot gainlayout unselectable">
<span class="menuitem postmenuitem-report">
cvbcvb
</span>
</div>
</div>
What would the javascript code look like that searches the whole document for parts where the div with data-attributionline= contains testtext to replace the whole cited div from start to finish with "Filtered"?
or
What would the javascript code look like that searches the whole document for
<span class="name">
where the name contains testtext to replace the whole div starting from
<div id="<someid>" class="..." data-attributionline="testtext<some text>" data-created-at="<somedate>" data-updated-at="<somedate>" data-user-id="<someid>" >
to the last div, ie
</span>
</div>
</div>
with "Filtered"?

There is a whole bunch of attribute selectors (see also CSS), that will match elements with attributes that start with or contain testtext.
In javascript, you can use document.querySelector[All]() or a library function that supports those to get the elements, then remove them.