Jquery and selectors

[FResher]

Hello Helpers !

I have a html part to select by JQuery :

<section id="home">
<div class="main-title"> home </div>

<br> text ... text ... text <br><br>

</section>

<section id="account">
<div class="main-title"> Account </div>

<br> text ... text ... text <br><br>

</section>

I am using JQuery , and my aim is to change all texts after the div main-title, for now , I can't manage to do it,
trying many 'selectors' solution.

Do you have any good ways to achieve ?

Jquery selectors are :

$('tag .class #id').function...

 

[VBService]

Have you tried this way?

$(document).ready(function() {
  $('#home').html($('.main-title').prop('outerHTML') + 'Lorem ipsum text1');
  $('#account').html($('.main-title').prop('outerHTML') + 'Lorem ipsum text2');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<section id="home">
  <div class="main-title"> home </div>
  text ... text ... text
</section>

<section id="account">
  <div class="main-title"> Account </div>
  text ... text ... text
</section>

<script>
  $(document).ready(function() {
    $('#home').html($('.main-title').prop('outerHTML') + 'Lorem ipsum text1');
    $('#account').html($('.main-title').prop('outerHTML') + 'Lorem ipsum text2');
  });
</script>

<style>
  section {
    margin-bottom: 1.7rem; /* instead of <br><br> */
  }
  section div.main-title {
    margin-bottom: .9rem; /* instead of <br>  */
  }
</style>

or

  $(document).ready(function() {
    $('#home .text').text('Lorem ipsum text1');
    $('#account .text').text('Lorem ipsum text1');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<section id="home">
  <div class="main-title"> home </div>
  <div class="text">
    text ... text ... text
  </div>
</section>

<section id="account">
  <div class="main-title"> Account </div>
  <div class="text">
    text ... text ... text
  </div>
</section>

<script>
  $(document).ready(function() {
    $('#home .text').text('Lorem ipsum text1');
    $('#account .text').text('Lorem ipsum text2');
  });
</script>

<style>
  section {
    margin-bottom: 1.7rem; /* instead of <br><br> */
  }
  section div.main-title {
    margin-bottom: .9rem; /* instead of <br>  */
  }
</style>

 

[FResher]

Thank you VBService for all the purposes and your full answer