We Keep Coding

How to find the corresponding div closing tag?

I have a html code like following
<div class="body">
<h1>ddd</h1>
<p>dadfsaf</p>
<div id="name">
<div class="des">psd</div>
<div>www</div>
</div>
<div>ppp</div>
</div>
I would like to get the content inside a div that starts with <div id="name"> and ends with its corresponding closing tag. Here the content is
<div class="des">psd</div>
<div>www</div>
I tried <div id="name">.*</div>, but it doesn't work. Please help, thank you.
Append, I wrote this code in node.js.

var name = $("#name").html()
console.log(name)

Insert plain text between two divs

I have some HTML, like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Is there a way using jQuery to insert the plain text Bar directly in between #foo2 and #foo3, so the resultant HTML would be like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
Bar
<div id="foo3">foo3</div>
</div>
I am able to put the text in with a <span> tag using $("<span/>").text("Bar").insertAfter("#foo2"), but is there a way to just put the plain text there, without a <span> around it?

You can use .after:
$('#foo2').after('bar');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>

Use document.createTextNode("bar"):
$("#foo2").after(document.createTextNode("bar"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>

In the case you need an alternative with plain JavaScript, you can use insertAdjacentText()
document.getElementById('foo2').insertAdjacentText('afterend', 'bar');
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In case you are interested, the first argument provides other alternatives:
element.insertAdjacentText(position, element);
position
A DOMString representing the position relative to the element; must be one of the following strings:
'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.
element
A DOMString representing the text to be inserted into the tree.

make a script write on every div.class based on the div's defined variables

i have a <script> which can generates blog posts, and want to add it on separated <div> with different styles by a shortcode.
example: label,style-2
i managed to make the <script> generate the options as variables from the shortcode and output it into posts and everything.. which you can preview here : JS Fiddle
but i have one big problem, which i don't like to add the <script> on every <div>..
this is the code i want
<div id='main'>
<div class='col'>
<div class="widget HTML" data-version="1" id="HTML14">
<h2 class="title">Example 1</h2>
<div class="widget-content">
label,style-1
</div>
</div>
<div class="widget HTML" data-version="1" id="HTML15">
<h2 class="title">Example 2</h2>
<div class="widget-content">
label,style-2
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//script here
</script>
i tried several times and searched but i couldn't make a code that can output the results in every div i choose based on the <div> shortcodes.
this is the json xml file i get the posts from JSON File

How to load HTML after content has been loaded

I am trying to get a list of the content on a website (this one if anyone is interested). The layout has changed recently and now they do not load the content all at once, but with magic (js probably). I'm currently using JSoup to analyze the HTML, but im open to suggestions.
This is what i am getting:
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<div class="loading-spinner" data-v-6e4dbe9e> //the devil himself
<div class="spinner" data-v-ac3cb376 data-v-6e4dbe9e>
<div class="rect1" data-v-ac3cb376></div>
<div class="rect2" data-v-ac3cb376></div>
<div class="rect3" data-v-ac3cb376></div>
<div class="rect4" data-v-ac3cb376></div>
<div class="rect5" data-v-ac3cb376></div>
</div>
</div>
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
//Here should be stuff!
</div>
</div>
</div>
the code that achieves this:
String selector = "div.podcasts-items";
Elements elem = Jsoup.connect(link).get().select(selector)
System.out.println("html: "+elem.html());
This is what i would like to see (copied from inspect element after the page has loaded all the content):
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<!----> //begone evil!
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
</div>
</div>
</div>
Google doesn't help much, because every content related to spinners etc. is about javascript.
solution:
due to the fact that JSoup only loads the HTML and does not execute any javascript the page never had a chance to load the content. You would have to use an actual browser engine or a webdriver like selenium to get the data to load.
For this specific problem I was able to get the content directly via loading the Json data through this webpage's API.

If I understood your question then your best bet is to use Selenium driver. Link to similar question

just one of the ng-bind-html in page work

I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?

I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml

If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>

You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>