I have html that generates <div> codes like this
<div>
<div>
<div id ="title"> This is my Title</div>
</div>
<div id ="description"> This is Description</div>
</div>
and I need to get the content of those div sometimes the div id change or sometimes give no id. My question is how can I get the value or the content of that div if the div's id changes every time I load the page or is there any way or idea on how can I achieve it and I need to know if that div contains description or title? I think it's hard to implement.
If you could add an id or a class to the parent element of those divs.
<div id='wrapper'>
<div>
<div id ="title"> This is my Title</div>
</div>
<div id ="description"> This is Description</div>
</div>
You could:
var title_html = $('.wrapper').find('div#title').html();
var desc_html = $('.wrapper').find('div#description').html();
And the you may check the values of those variables.
In case the id is completely random but the structure is static you could:
var contents_one = $('wrapper').children().get(0).children().get(0).html();
var contents_two = $('wrapper').children().get(1).html();
Related
Can I add div contents (innerText / textContent) after adding a div in the parent class using JavaScript. I know it's confusing and also I am not sure whether my demand is correct or not.
Can someone just help how to achieve below HTML results using JS.
<div class="container">
<div class="mesg left">
<div class="username">
You
</div>
The main content goes here
<span id="time">08:23am</span>
</div>
</div>
I had tried to achieve this but I my case the content comes up... Like(see the output html from what I have did from JS)
<div class="container">
<div class="description">
The main content goes here
<div class="name">
James
</div>
<span id="time">08:23am</span>
</div>
</div
You can use Node.insertBefore to place the text before the timestamp.
Given your HTML this would work:
const time = document.getElementById("time")
const content = document.createElement("p")
content.innerText = "The main content goes here"
document.getElemenstByClassName("mesg left")[0]
.insertBefore(content, time)
I have created a div with Javascript, this displays correctly, however it is not in the place where I want, I would like to put it inside a container as the first element. I'm not very good, I'm trying to learn, so sorry for the triviality of the question.
How do I put the div I created inside an already existing container as the first element?
Beyond that I would like to understand the logic of the operation, for example, how can I move the new div as the last element? Or as a second element ?
This is the Js code
// Add New Element
var newEl = document.createElement("div");
var text = document.createTextNode("Hello");
newEl.appendChild(text);
var element = document.getElementById("main_container");
element.appendChild(newEl);
This is what I am trying to achieve
<div id="main_container" class="something">
<div class="new_element">Hello</div>
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
This is what I got for now
<div id="main_container" class="something">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
<div>Hello</div>
This should work:
element.insertBefore(newEl, element.firstChild)
const parent;
const newFirstChild;
parent.insertBefore(newFirstChild, parent.firstChild);
In your case:
element.insertBefore(newEl, element.firstChild)
If you want to insert at a different index you can do it like this:
parent.insertBefore(newEl, parent.children[2])
Codepen
I have this problem which I am trying to solve after I cloned a div multiple times using javascript. I want to replace the inner div with an empty div having a particular id for each. Assuming I have:
<div id="original">
//some code here
<div id="problem">
//some code here
</div>
</div>
<div id="location">
//some code here
<div id="problem">
//some code here
</div>
</div>
<div id="rep">
//some code here
<div id="problem">
//some code here
</div>
</div>
I need to be able to get the div with id problem in the div location and replace it with something else and same to the div within the div repository.
I tried
document.getElementById("location") but that returns the whole content and I cannot replace a particular div within it and if I try document.getElementById("problem") I cannot specify which one I need
you can use querySelector on a tag to get the first element that match a selector
you can combine it with
innerText / innerHTML to modify directly content
appendChild if you have create an html structure in js part
var locationDiv = document.getElementById('location');
var problemDiv = locationDiv.querySelector('#problem');
problemDiv.innerText = 'test';
<div id="original">
<div id="problem">
</div>
</div>
<div id="location">
<div id="problem">
</div>
</div>
<div id="rep">
<div id="problem">
</div>
</div>
i have dynamic data in my rails view, all divs have the same name; 'allData', which has alot of info, so i have it not displayed, i want to display that specific div and not all divs when i click show, but it shows all divs, i want to be able to show just that target div i clicked
$('.show'').on('click', (event) =>{
$('.allData').toggle();
$(event.currentTarget).closest('.allData').toggle();
})
<div class='eachData'>
<div class='header'>
<div class='show'> show</div>
<div class='numberOfdata'> 100</div>
</div>
<div class='allData; display:none'>
"foobar all data is here"
</div>
</div>
<div class='eachData'>
.......
</div>
<div class='eachData'>
.......
</div>
Your closest call is on the right track but you're not quite using it right. First you want to find the container (.eachData) that contains your <div class="show">, you use closest for that:
let container = $(event.currentTarget).closest('.eachData');
then you search within that container for the .allData you want to toggle by using find:
container.find('.allData').toggle();
So you use closest to go up the node tree and then find to come back down.
BTW, this:
<div class='allData; display:none'>
should be:
<div class="allData" style="display: none">
The class attribute contains CSS class names delimited by whitespace, raw CSS goes in the style attribute and is delimited by semicolons.
Your inline style on the div should be as follows:
<div class="allData" style="display: none">
Then try the following:
$('.show').on('click', function() {
$(document).find('.eachData .allData:visible').hide('fast');
$(this).parent().closest('.allData').show('fast');
});
I'm building a website for a school assignment, so it's kind of simple. Please excuse or correct any incorrect terminology.
I have multiple identical div's , all sharing the same class, each of these has two paragraph elements in them with some some text in each.
Triggered by a click, I want the specific div I clicked on to be assigned an id for reference in a variable, which should store some text from a child paragraph. I am trying to make a div appear, and the text to be pulled in from the variable.
This is the Javascript I have written:
$(document).ready(function(){
//Hide the overlay.
$('#overlay_align').hide()
//Fade in the overlay and change the title.
$('.object').click(function(){
//Sets the clicked item to have an id "active", for use in the variable "title".
$(this).attr("id", "active")
//Gets the text from this item's title section.
var title = $('#active:nth-child(2)').text()
//Sets the title printed in the overlay to whatever the title of the clicked item was.
$('#overlay_title').html(title)
console.log( title )
$('#overlay_align').fadeIn("fast");
})
//Fade out the overlay.
$('#close').click(function(){
$('#overlay_align').fadeOut("fast")
//remove the id for reuse when another item is clicked.
$('#active').removeAttr("id");
});
});
And the relevant part of the HTML document:
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css"/>
<!--jQuery 1.4.2-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--Overlay on click-->
<script type="text/javascript" src="../Overlay.js"></script>
</head>
<body>
<div id="overlay_align">
<div id="overlay">
<div id="overlay_left">
<img id="overlay_img" src=""/>
<img id="loading" src="../Loading.gif" width="50" height="50" style="margin-top:50%"/>
</div>
<div id="overlay_right">
<p id="overlay_title"></p>
<img id="close" src="../Close%20Button.png" width="20" height="20"/>
<p id="overlay_description"></p>
</div>
<div id="overlay_footer">
</div>
</div>
</div>
<div class="object">
<div class="display"></div>
<p class="title">Ttile</p>
<p class="category">Category</p>
</div>
<div class="object">
<div class="display"></div>
<p class="title">Ttile</p>
<p class="category">Category</p>
</div>
<div class="object">
<div class="display"></div>
<p class="title">Ttile</p>
<p class="category">Category</p>
</div>
The issue I have is that currently, the variable stores the content of both the paragraphs instead of just the second one, (so it appears as "Title Category", and even that only works with the first div. I'm not fixed on this way of doing it, so I'm open to any other ways of doing this too.
Reputation is preventing me from posting individual links, so heres an imgur album showing the different states it's appearing in: https://imgur.com/a/bB7XQ
PS: Is there any way to not have to manually indent every line with four spaces?
You are looking at the wrong element. The selector #active:nth-child(2) isn't looking for the second child in the element with id="active", it looks for an element with that id that is the second child. You would use #active p:nth-child(2) to look for the paragraph inside the element.
However, you will run into a problem as you are adding an id to the element. The second time that you click something you will have that id on two elements, so you will get the text from that element and the text from the previous element. Also, as an id should be unique in the page, you may even get some unexpected behaviour in some browsers.
You don't need to set the id on the element to find it, you already have a reference to it in this that you can use. Specify this as context, and use the selector p:nth-child(2):
$('.object').click(function(){
//Gets the text from this item's title section.
var title = $('p:nth-child(2)', this).text()
//Sets the title printed in the overlay to whatever the title of the clicked item was.
$('#overlay_title').html(title)
console.log( title )
$('#overlay_align').fadeIn("fast");
})
Demo: http://jsfiddle.net/6D9JD/
I am not sure if I am answering the question correctly. As per my understanding the problem you are facing is
var title = $('#active:nth-child(2)').text()
Instead of looking for the second last child you can find the class title in the corresponding div.
var title = $('#active').find('.title'); //Assuming that you have only one title in a single div
you need to use
$('#active:nth-child(2)').children().last().text()
instead of
$('#active:nth-child(2)').text()