I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

Question

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following:

<body>
<div class="component" id="465a496s5498">
  <div class="a-container">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
    </div>
   </div>
   <div class="random-div">
    <div class="random"></div>
   </div>
  </div>
</div>
<div class="component" id="683fg5865448">
  <div class="another-container">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Wow!</div>
    </div>
   </div>
   <div class="random-div6">
    <div class="random2"></div>
   </div>
 </div>
</div>
<div class="component" id="247487294js5">
  <div class="more-containers">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Haha!</div>
    </div>
   </div>
   <div class="random-div6">
    <div class="random5"></div>
   </div>
 </div>
</div>
</body>

I am aiming to form an array of objects that contains the unique ID of each component and the raw HTML within the element with the class name "wantThis" (which will always be named "wantThis"). Therefore, the resulting array would appear as follows:

[{
 id: "465a496s5498",
 html: "<div class='wantThisHTML'>Hello!<p>I'm another element!</p></div>"
},{
 id: "683fg5865448",
 html: "<div class='wantThisHTML'>Wow!</div>"
},{
 id: "247487294js5",
 html: "<div class='wantThisHTML'>Haha!</div>"
}]

In terms of my approach, I've divided the elements into an array using var elements = $(body).children. I understand how to retrieve the HTML content of an element using $(.wantThis).html(), but I am unsure of how to extract both the ID and the HTML from each child element I obtain.

Additionally, there could be multiple elements within the wantThis element - will $(.wantThis).html() return the raw HTML of all the children?

javascript jquery html css algorithm

Answer 1

Answer №1

Here is the solution.

var data = $('> .component', document.body).map(function(component) {
    return {
      id: this.id,
      html: $(this).find('.wantThisHTML').html()
    }
  })
  .toArray();

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
  <div class="a-container">
    <div class="random-div">
      <div class="wantThis">
        <div class="wantThisHTML">Hello!
          <p>I'm another element!</p>
        </div>
      </div>
    </div>
    <div class="random-div">
      <div class="random"></div>
    </div>
  </div>
</div>
<div class="component" id="683fg5865448">
  <div class="another-container">
    <div class="random-div">
      <div class="wantThis">
        <div class="wantThisHTML">Wow!</div>
      </div>
    </div>
    <div class="random-div6">
      <div class="random2"></div>
    </div>
  </div>
</div>
<div class="component" id="247487294js5">
  <div class="more-containers">
    <div class="random-div">
      <div class="wantThis">
        <div class="wantThisHTML">Haha!</div>
      </div>
    </div>
    <div class="random-div6">
      <div class="random5"></div>
    </div>
  </div>
</div>

Answer 2

Here is the solution.

var data = $('> .component', document.body).map(function(component) {
    return {
      id: this.id,
      html: $(this).find('.wantThisHTML').html()
    }
  })
  .toArray();

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
  <div class="a-container">
    <div class="random-div">
      <div class="wantThis">
        <div class="wantThisHTML">Hello!
          <p>I'm another element!</p>
        </div>
      </div>
    </div>
    <div class="random-div">
      <div class="random"></div>
    </div>
  </div>
</div>
<div class="component" id="683fg5865448">
  <div class="another-container">
    <div class="random-div">
      <div class="wantThis">
        <div class="wantThisHTML">Wow!</div>
      </div>
    </div>
    <div class="random-div6">
      <div class="random2"></div>
    </div>
  </div>
</div>
<div class="component" id="247487294js5">
  <div class="more-containers">
    <div class="random-div">
      <div class="wantThis">
        <div class="wantThisHTML">Haha!</div>
      </div>
    </div>
    <div class="random-div6">
      <div class="random5"></div>
    </div>
  </div>
</div>

Answer 3

Answer №2

When it comes to tackling this issue...

Begin by choosing the Nodes (elements) using "querySelectorAll"

const nodeListOfElements = document.querySelectorAll('.element')

This will give you a NodeList. NodeList

You can then convert this into an array of Nodes by:

const elementArray = [].slice.call(nodeListOfElements)

Stack Overflow Post

After that, utilizing that array of nodes. You can 'map' it to fit the desired structure.

const updatedResult = elementArray.map(function(item, index) {
  let targetElement = item.querySelector('.needThisHTML')
  return {
    id: item.id,
    html: targetElement.innerHTML
  }
})

Note: each "item" represents an element/node and the querySelector method can be utilized to choose children of that element. I am focusing on the specified class. After that, it's simply about generating an object for each loop iteration that the map function runs. You determine the keys and values that the map function outputs. In this case, I'm setting the id key to the element's id, and the html key to the "innerHTML" of the targeted child element within each primary element.

The resulting format appears as follows:

(3) [{…}, {…}, {…}]
0: {id: "465a496s5498", html: "Hello!<p>I'm another element!</p>"}
1: {id: "683fg5865448", html: "Wow!"}
2: {id: "247487294js5", html: "Haha!"}
length: 3

Explore the CodePen example: https://codepen.io/nstanard/pen/exOJLw

If you found this helpful, please consider giving an upvote and approving my answer! Thank you

Answer 4

When it comes to tackling this issue...

Begin by choosing the Nodes (elements) using "querySelectorAll"

const nodeListOfElements = document.querySelectorAll('.element')

This will give you a NodeList. NodeList

You can then convert this into an array of Nodes by:

const elementArray = [].slice.call(nodeListOfElements)

Stack Overflow Post

After that, utilizing that array of nodes. You can 'map' it to fit the desired structure.

const updatedResult = elementArray.map(function(item, index) {
  let targetElement = item.querySelector('.needThisHTML')
  return {
    id: item.id,
    html: targetElement.innerHTML
  }
})

Note: each "item" represents an element/node and the querySelector method can be utilized to choose children of that element. I am focusing on the specified class. After that, it's simply about generating an object for each loop iteration that the map function runs. You determine the keys and values that the map function outputs. In this case, I'm setting the id key to the element's id, and the html key to the "innerHTML" of the targeted child element within each primary element.

The resulting format appears as follows:

(3) [{…}, {…}, {…}]
0: {id: "465a496s5498", html: "Hello!<p>I'm another element!</p>"}
1: {id: "683fg5865448", html: "Wow!"}
2: {id: "247487294js5", html: "Haha!"}
length: 3

Explore the CodePen example: https://codepen.io/nstanard/pen/exOJLw

If you found this helpful, please consider giving an upvote and approving my answer! Thank you

Answer 5

Answer №3

Ensure that the .component contains the desired '.wantThis' child element.

var data = $('.wantThis').map(function() {
  return {
    id: $(this).parents('.component').attr('id'),
    html: $(this).html()
  }
});
console.log(data);

var data = $('.wantThis').map(function() {
  return {
    id: $(this).parents('.component').attr('id'),
    html: $(this).html()
  }
});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
  <div class="a-container">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
    </div>
   </div>
   <div class="random-div">
    <div class="random"></div>
   </div>
  </div>
</div>
<div class="component" id="683fg5865448">
  <div class="another-container">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Wow!</div>
    </div>
   </div>
   <div class="random-div6">
    <div class="random2"></div>
   </div>
 </div>
</div>
<div class="component" id="247487294js5">
  <div class="more-containers">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Haha!</div>
    </div>
   </div>
   <div class="random-div6">
    <div class="random5"></div>
   </div>
 </div>
</div>

Answer 6

Ensure that the .component contains the desired '.wantThis' child element.

var data = $('.wantThis').map(function() {
  return {
    id: $(this).parents('.component').attr('id'),
    html: $(this).html()
  }
});
console.log(data);

var data = $('.wantThis').map(function() {
  return {
    id: $(this).parents('.component').attr('id'),
    html: $(this).html()
  }
});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
  <div class="a-container">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
    </div>
   </div>
   <div class="random-div">
    <div class="random"></div>
   </div>
  </div>
</div>
<div class="component" id="683fg5865448">
  <div class="another-container">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Wow!</div>
    </div>
   </div>
   <div class="random-div6">
    <div class="random2"></div>
   </div>
 </div>
</div>
<div class="component" id="247487294js5">
  <div class="more-containers">
   <div class="random-div">
    <div class="wantThis">
      <div class="wantThisHTML">Haha!</div>
    </div>
   </div>
   <div class="random-div6">
    <div class="random5"></div>
   </div>
 </div>
</div>

Answer 7

Answer №4

<div id="unique-elem">
    <div id="elem-description">Unique Element</div>
</div>

<script>
    alert(unique-elem); // DOM-element with id="unique-elem"
    alert(window.unique-elem); // accessing global variable like this also works

    // for elem-description things are a bit more complex
    // since it has a dash inside, it can't be a variable name in JavaScript
    alert(window['elem-description']); // ...but accessible using square brackets [...]
</script>

reference: https://javascript.info/searching-elements-dom

Answer 8

<div id="unique-elem">
    <div id="elem-description">Unique Element</div>
</div>

<script>
    alert(unique-elem); // DOM-element with id="unique-elem"
    alert(window.unique-elem); // accessing global variable like this also works

    // for elem-description things are a bit more complex
    // since it has a dash inside, it can't be a variable name in JavaScript
    alert(window['elem-description']); // ...but accessible using square brackets [...]
</script>

reference: https://javascript.info/searching-elements-dom

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Separating express routes into individual files

Ways to eliminate the vertical scroll feature in a kendo chart

Encountering problems when trying to mock values with Jest

Upon inserting Node 5, an error with the code EINVALIDTYPE occurred in npm

Exploring the distinctions among different xpath implementations in Selenium WebDriver

Unable to establish API connection in node.js

Positioning an HTML control on top of a Silverlight Application, ensuring it moves in sync with the application as it scrolls

Error encountered: Unexpected token while trying to implement React + Node.js tutorial on a blog platform

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

Creating a dynamic side navigation menu that adjusts to different screen sizes

Hover over with your mouse to open and close the dropdown menu in React JS

Tips for adding animation to the div instead of the content

Confirming the existence of a folder with AngularJS

Package for running scripts in Node Package Manager

jqGrid: Enhance the advanced search dialog by updating the column dropdown feature following the addition of a column using the column

Make sure that the function displays the output once it has been received using the jQuery.get method

What is the technique for integrating a required file into an Angular module using Browserify?

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

The array value remains unchanged when included in the response

Transferring Data to EJS Template