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 contentappendChild if you have create an html structure in js partvar 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>