Replace identical nested divs within different outer div from javascript - javascript

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>

Related

Can I add div contents after defining a div child using JavaScript?

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)

How to have infinite number of copy to clipboard for infinite elements that have same class?

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);
}
);
});

How to extract a particular HTML div class from many div classes by javascript

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>

how to toggle a specific div in javascript

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');
});

Move a DOM element whilst still keeping it in its own container

I want to move a DOM element inside the DOM but whilst still keeping it in its own container.
Take the following HTML:
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
I want to put the .bit containing A to the end of this list, just below E whilst still keeping it inside the div .contain.
I have tried the following:
$('.contain').find('bit').first().appendTo('.contain');
and:
$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last());
And neither of them work.
I have very little control over the HTML. For example I can't give each .bit its own unique ID.
Can someone explain what I am doing wrong?

Just append it to the same container and A is moved to the end of the list.
Your two attempts works - you have missed the . for the find('.bit') part.
See demo below:
$('.contain').append($('.contain .bit:first-child'));
// the below works too
// $('.contain').find('.bit').first().appendTo('.contain');
// and even this works
// $('.contain').find('.bit').first().insertAfter($('.contain').find('.bit').last());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>

You need to use the class selector ., which you already use for .contain
$('.contain').find('.bit').first().appendTo('.contain');
working snippet:
$('.contain').find('.bit').first().appendTo('.contain');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>

Categories

Resources