How can I extract content nested within another element's id?

Question

How can I extract content nested within another element's id?

Below is the HTML code snippet I am working with:

<div id='content'>
  <div id='price'>$100</div>
  <div id='another'>something</div>
</div>

I am able to extract content from the element with id="content" using the following code:

vl = document.getElementById("content").value;

Within this "content" id, there is another element with id="price". However, I am unable to directly retrieve the content of id="price".

Can you guide me on how to access the content from id="price" through the use of id='content'? Your assistance is appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

Using jQuery:

$("#price").text();

In vanilla JavaScript:

document.getElementById("price").innerHTML;

Check out the live demo here

Answer 2

Using jQuery:

$("#price").text();

In vanilla JavaScript:

document.getElementById("price").innerHTML;

Check out the live demo here

Answer 3

Answer №2

To retrieve the value, you can do the following:

vl = document.getElementById("price").innerHTML;

Check out this JSFiddle example

If you prefer, you can also utilize jQuery and its methods like .html() or .text().

Answer 4

To retrieve the value, you can do the following:

vl = document.getElementById("price").innerHTML;

Check out this JSFiddle example

If you prefer, you can also utilize jQuery and its methods like .html() or .text().

Answer 5

Answer №3

Give it a shot,

Retrieve the HTML content of the element with id 'content' and then find the element with id 'price'.

Answer 6

Give it a shot,

Retrieve the HTML content of the element with id 'content' and then find the element with id 'price'.

Answer 7

Answer №4

Here's a suggestion:

Let's try the following code snippet:

var container = document.getElementById('content');
var elements = container.childNodes;

for(var x = 0; x < elements.length; x++){
    if(elements[x].id === "price") {
        alert(elements[x].innerHTML);
    }
}

Answer 8

Here's a suggestion:

Let's try the following code snippet:

var container = document.getElementById('content');
var elements = container.childNodes;

for(var x = 0; x < elements.length; x++){
    if(elements[x].id === "price") {
        alert(elements[x].innerHTML);
    }
}

Answer 9

Answer №5

When utilizing jquery,

 $("#content > #price").text();

Answer 10

When utilizing jquery,

 $("#content > #price").text();

Answer 11

Answer №6

To retrieve the price value directly, you can use the following code:

var priceValue = document.getElementById("price").value;

Answer 12

To retrieve the price value directly, you can use the following code:

var priceValue = document.getElementById("price").value;

Answer 13

Answer №7

When utilizing Jquery library,

value1 = $('#content').html();
value2 = value1.find('#price');
value3 = value1.find('#another')

Answer 14

When utilizing Jquery library,

value1 = $('#content').html();
value2 = value1.find('#price');
value3 = value1.find('#another')

Answer 15

Answer №8

Give this a try:- http://jsfiddle.net/adiioo7/C3C4x/1/

const cost = document.querySelector("#content #price").innerHTML;

console.log(cost);

Answer 16

Give this a try:- http://jsfiddle.net/adiioo7/C3C4x/1/

const cost = document.querySelector("#content #price").innerHTML;

console.log(cost);

Answer 17

Answer №9

Unique identifiers, like IDs, are best reserved for elements that only appear once on a webpage. If there is a need to reassign these unique identifiers, it's advisable to use the class attribute instead.

One way to select elements is by using:

var selectedElement = document.getElementById("main").getElementsByClassName("card")[0];

Sample HTML structure:

<div id='main'>
   <div class='card'>Card 1</div>
   <div class='card'>Card 2</div>
</div>

Answer 18

Unique identifiers, like IDs, are best reserved for elements that only appear once on a webpage. If there is a need to reassign these unique identifiers, it's advisable to use the class attribute instead.

One way to select elements is by using:

var selectedElement = document.getElementById("main").getElementsByClassName("card")[0];

Sample HTML structure:

<div id='main'>
   <div class='card'>Card 1</div>
   <div class='card'>Card 2</div>
</div>

Answer 19

Answer №10

If you're looking to access the child element through the parent element, then I have a solution using jQuery. Check out my demo here.

$(document).ready(function(){
  var value = $('#content').children('#price').text();
    alert(value);
});

Answer 20

If you're looking to access the child element through the parent element, then I have a solution using jQuery. Check out my demo here.

$(document).ready(function(){
  var value = $('#content').children('#price').text();
    alert(value);
});

How can I extract content nested within another element's id?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Give this a try:- http://jsfiddle.net/adiioo7/C3C4x/1/

Answer №9

Answer №10

Similar questions

Steps for implementing AJAX to display a success function and update database results in real-time

Is Axios failing to generate a cookie despite the presence of a set-cookie header?

Glistening tabPanel and Analytics by Google

The router is displaying the component directly on the current page rather than opening it on a separate page

Kendo UI: Harnessing the power of one data source across two dynamic widgets

`CSS border issues`

Troubleshooting Unresolved Issues with MongoDB and Node.js Promises

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

Utilizing AngularJS Directives: Extract a HTML attribute as a character sequence, employed as a key in a dictionary

Using JSON data to populate the jQuery UI Datepicker

Utilizing SASS to retrieve the H, S, L values from a color

Step-by-step guide to creating a custom wrapper in React that modifies the props for a component

Using JQuery to Refresh a Div and Trigger an API Call with a Click Event

Making an Ajax call using CakePHP

Create a solution that is compatible with both web browsers and Node.js

Tips for adding a search button within the input field

Survey with results routing based on rating

The function `createUser` is currently not functioning properly on Firebase/Auth with Next.js

Tips for creating a div element with a header and scrollable section

JavaScript for Office Spreadsheet Titles