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)
Related
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>
My HTML:
<Div Class='POSTS'>
<Div Class='POST'>
<Div Class='CONTENT'>Text1</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text2</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text3</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text4</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text5</Div>
</Div>
<Div Class='POST'>
<Div Class='CONTENT'>Text6</Div>
</Div>
</Div>
And It Continues Without Any Limit...(Never Ending)
With Different Text Inside Each Element With Class Of "CONTENT".
I Searched Over This Website And Found This :
Https://Stackoverflow.Com/Questions/400212/How-Do-I-Copy-To-The-Clipboard-In-Javascript
But In The Project That I'm Working In I Can't Specify Id On Each Element As You Know It's Infinite Number Of These Elements:
<Div Class='POST'>
<Div Class='CONTENT'>some text</Div>
</Div>
So It Needs To Be Automatically Added.
And I Want To :
When User Clicks On The Text Inside Of Element With The Class Of "CONTENT" (No Matter How Long The Text Is And What It Have) , The Entire Text And Tags And ... Be Copied To Clipbored.
I Don't Want To Set Buttons !
I Want To Make The Whole
Tags,Text,And ....
Be Copied On Each One Of Them Without Any Limits!
By Clicking on it's own text.(imagine this as a textarea that user clicks on text inside of it and js copies all of text but this one is div with text inside of it)
If You Think I Missed Sth And It's Not Clear Enough Let Me Know!
Thanks In Advance!
This should solve your problem.
First select the entire object and then get the element which was clicked. Copy the content.
var posts = document.querySelector(".POSTS");
posts
.addEventListener("click", function (e) {
console.log("index", e.target);
navigator.clipboard.writeText(e.target.innerText).then(
function () {
console.log("Async: Copying to clipboard was successful!");
},
function (err) {
console.error("Async: Could not copy text: ", err);
}
);
});
I have this code below, it also has image URL and many more which I didn't post buti want to get the whole exact div tag exactly it is trimming all the other div tags. like i want "col-sm-8" div tag exact it is from the whole function
<html><body><div class='col-sm-8'>
<div class='MainMessageFormat FixedMarginForMessage'>
<pre><p>test message</p></pre>
</div></div>
<div class='col'>
<div class='MainMessageFormat'>
<pre><p>test message</p></pre>
</div></div>
<div class='row'>
<div class='MainMessage'>
<pre><p>test message</p></pre>
</div></div>
</body></html>
You can use innerText property of javascript like below:
console.log(document.querySelector('.MainMessageFormat.FixedMarginForMessage').innerText);
<html><body><div class='col-sm-8'>
<div class='MainMessageFormat FixedMarginForMessage'>
<pre><p>test message</p></pre>
</div></div>
</body></html>
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 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();