I'm learning to get data from other pages using jQuery and one of the problems I encountered while doing so is when trying to find multiple elements, getting the text from them and then printing them into multiple lines

The problem is that I didn't find a way to print them into multiple lines without storing each element in its own variable.

Here's an example that clarifies what I'm trying to do:

External HTML:

<div class="element element1">
<div class="irrelevant">irrelevant text 1</div>
<div class="anitem1">text 1</div>
<div class="theitem2">text 2</div>
<div class="irrelevant">irrelevant text 2</div>
<div class="item3">text 3</div>
<div class="theitem4">text 4</div>
<div class="irrelevant">irrelevant text 3</div>
</div>

Internal HTML:

<div class="app"></div>

jQuery:

theUrl = '=' + encodeURIComponent('
.html');

$.ajax({
url: theUrl,
type: get,
dataType: "",
success: function(data) {
$(data.contents).find('.element').each(function(i, obj){
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').text();

$('.app').append(getText) // output: text 1text 2text 3text 4

})
}
})

The text is on the same line, but what I'm looking for is to print it on multiple lines.

Expected Output:

text 1
text 2
text 3
text 4

I'm learning to get data from other pages using jQuery and one of the problems I encountered while doing so is when trying to find multiple elements, getting the text from them and then printing them into multiple lines

The problem is that I didn't find a way to print them into multiple lines without storing each element in its own variable.

Here's an example that clarifies what I'm trying to do:

External HTML:

<div class="element element1">
<div class="irrelevant">irrelevant text 1</div>
<div class="anitem1">text 1</div>
<div class="theitem2">text 2</div>
<div class="irrelevant">irrelevant text 2</div>
<div class="item3">text 3</div>
<div class="theitem4">text 4</div>
<div class="irrelevant">irrelevant text 3</div>
</div>

Internal HTML:

<div class="app"></div>

jQuery:

theUrl = 'https://api.allorigins.ml/get?url=' + encodeURIComponent('
https://www.thisisjustanexampleurl./something.html');

$.ajax({
url: theUrl,
type: get,
dataType: "",
success: function(data) {
$(data.contents).find('.element').each(function(i, obj){
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').text();

$('.app').append(getText) // output: text 1text 2text 3text 4

})
}
})

The text is on the same line, but what I'm looking for is to print it on multiple lines.

Expected Output:

text 1
text 2
text 3
text 4

• javascript
• jquery
• html
• dom

• Have you tried appending the text and adding a line break, or enclosing the text within <p> tags? – afishintaiwan Commented Jan 27, 2019 at 5:42
• use \n where ever you want to break line – Maheer Ali Commented Jan 27, 2019 at 5:42
• If you know whose text to get by its class name, then below code should work. $('.app').append($('.element>.anitem1').text(),$('.element>.anitem2').text()) – Viresh Mathad Commented Jan 27, 2019 at 6:35
• That will be repetitive. it's also possible to select the element and then store it in a variable. then I call each variable to append the elements. I'm trying to find a way to not repeat the same code again. But thank you anyway. – Dexter Commented Jan 27, 2019 at 6:44
• @Dexter one line, one property see my answer – zer00ne Commented Jan 27, 2019 at 6:48

4 Answers 4

You may iterate again through the objects in .find() result:

var newText;
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').each(function(){
  newText=$(this).text() + '<br>'; // or \n
  $('.app').append(newText);
});

You can use children function and get text using text and append a new line \n

let vars = '';
$('.element').children().each((i, v) => {
  vars += $(v).text() + '\n'

})

console.log(vars)

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element element1">
  <div class="anitem1">text 1</div>
  <div class="theitem2">text 2</div>
  <div class="item3">text 3</div>
  <div class="theitem4">text 4</div>
</div>

.innerText

Handling text nodes was never one of jQuery's strong points. .innerText property extracts the text of selected elements plus that of all of it's descendants as well -- line breaks included. It's a plain JavaScript property so if you use it on a jQuery Object you need to dereference it to a DOM object. There are two ways to dereference:

$(selector)[0]

or

$(selector).get(0)

All it takes is one line. Just pick an ancestor element and let her rip.

$('.app')[0].innerText = $('.app')[0].innerText;

Solution

1. Filter the .irrelevant tags out:

$('.element').find(':parent').not('.irrelevant')...

2. Clone and append it to .app

.....clone(true, true).appendTo('.app');

3. Overwrite everything in .app with .innerText.

$('.app')[0].innerText = $('.app')[0].innerText;

The result is just text nodes and <br>. No repetition it's straight copy, paste, and format programmatically.

Demo

The text in the red outlined box (i.e. .app) is the result.

.app {
  outline: 1px dashed red
}

<!DOCTYPE html>
<html>
<head></head>
<body>
  <header class='app'></header>
  <div class="element element1">
    <div class="irrelevant">irrelevant text 1</div>
    <div class="anitem1">text 1</div>
    <div class="theitem2">text 2</div>
    <div class="irrelevant">irrelevant text 2</div>
    <div class="item3">text 3</div>
    <div class="theitem4">text 4</div>
    <div class="irrelevant">irrelevant text 3</div>
  </div>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('.element').find(':parent').not('.irrelevant').clone(true, true).appendTo('.app');
    $('.app')[0].innerText = $('.app')[0].innerText;
  </script>
</body>

</html>

I resolved this easily by creating an array for the elements I want to include and then I mapped over each element and added a </br> to the end.

Here's the code:

// Array for the elements I want to select
var classes = ['.anitem1', '.theitem2', '.item3', '.theitem4'];

// Declaring the variable which will include the elements of the list       
var lists;

/* Mapping over each element in classes array, 
finding it and getting a text from it + adding br tag to it*/

classes.map(function(x) {lists += $(obj).find(x).text() + '</br>'})

// Appending lists to app
$('.app').append('<ol><li>' + lists + '</li></ol>');

I selected zer00ne's answer as the best solution because it resolves the problem in only one line.

But for my code, I'm using the above because it resolves other problems that I'm unable to share all of them here and If I do I will end up writing a very long code. One of them is that I have many elements containing items with the same class. Using the former approach will push all of the items to the first ordered list, while what I want is pushing the items of the first element to the first <ol>, and those of the second to the second <ol> and so on.