We Keep Coding

Adding HTML via JS to a specific child-Element

I have a very specific situation where I have ~50 child-divs which I cannot influence directly, that is, I cannot add classes or ids to one specific child-div nor alter the div via HTML because they are created automatically.
They appear in a simple grid/flexbox, two boxes next to each other. I already altered some of them with nth-child, but now I want to add individual headlines between f.ex. div 30 and 31.
Up until now, when I wanted some of the fields to be bigger, I addressed one of the child-divs directly via nth-child.
Here's the basic structure:
<div class="parent">
{$content} // basically <div>{$single-box-content}</div>
</div>
And the CSS I currently use:
.parent {
width: 800px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.parent:nth-child(10) {
width:800px;
}
That worked quite well. However, now that I want to have a headline above one of the divs (not inside), it doesn't work. When I try this:
.parent:nth-child(31):before {
content: "Headline";
display: block;
}
It appears inside the child-div, not above it. I cannot add a div to the HTML part, since all of them are created automatically in the backend (it's a form).
I wondered if it is possible to use JavaScript with some element.innerHTML, but I am at the very beginning of learning JS and I couldn't find anything (I could adapt) to address specific child-Elements in JS.
Is there a frontend solution to my problem?

With JS you can add classes, IDs, append HTML-elements to the DOM and so much more.
Below shows you how to both to insert an h2, but also how to add a class to an element of your choosing - I used :nth-child(3) for illustration purposes, but you can just swap that with :nth-child(31). The code is explained in comments in the snippet.
// finding the child element with nth-child selector
let selected = document.querySelector('.parent:nth-child(3)');
// giving it a class name
selected.classList.add('parentClass');
// creating a h2 element
let header = document.createElement("h2");
// the text inside the h2 element
let headerText = document.createTextNode("headline");
// appending the text to the h2 element
header.append(headerText);
// giving the child a class name
header.classList.add('childClass');
// appending the headline above/before the selected element
selected.parentNode.insertBefore(header, selected);
/* the class applied with JS */
.parentClass {
background-color: red;
}
.childClass {
background-color: limegreen;
}
<div class="parent">parent 1</div>
<div class="parent">parent 2</div>
<div class="parent">parent 3</div>

Hide parent element on dragstart event

Using the Google Chrome browser, I need to drag-and-drop an item from a menu, in a way so that the menu will automatically close/hide/collapse/disappear/(or something similar) as soon as the dragstart event fires. This has to be done in a way such that the DOM space is freed up, so approaches using "visibility" and "opacity" for instance while possible are not good for this situation.
Instead, it is necessary to do something like display:none or pushing the menu off of the web page (without scrollbar). However, I've gotten stuck trying to accomplish this and could use some help (or if an alternative approach comes to mind that accomplishes the same, please let me know. I also tried a z-index approach without success.):
Approach 1 - Trying to hide dragged item's parent element via absolute positioning
https://jsfiddle.net/gratiafide/4m5r186v/
function dragstart_handler(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.currentTarget.parentElement.style.cssText = "position:absolute; right:-5000px;";
}
Approach 2 - Trying to hide dragged item's parent via setting display:none
https://jsfiddle.net/gratiafide/Luj7d089/
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById('parent').style.display = 'none';
}
You will see in both approaches, the dragged item gets dropped in both instances as soon as the CSS rule gets applied to the dragged item's parent element. I just want to be able to keep dragging the element even though I've hidden or moved the parent element out of sight. Thanks in advance for your help!

You seem to want your parents to disappear by dragging your child's element as it is.
The child element is influenced by the CSS style attribute of the parent element. If parents are erased through css properties such as "display", "visibility", and "opacity", the child element is not visible unconditionally.
Hiding using the "absolute" property(but not z-index -1) is also a way, but unwanted scrollbars may occur depending on the "overflow" attribute of the parent element, and the child element position must be added in reverse and recalculated.
As a result of my test, a dragend event occurred in Chrome when the parent element of the element to be dragged was redrawn. But in Firefox, both of your examples work.
Anyway, to explain based on how it works in Chrome, it is to separate the relationship between Child and Parent and use it as a sibling. Modify your HTML as follows.
<div id='relative_div'>
<div id="parent"></div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">Drag me to the Drop Zone below</p>
</div>
Next update your CSS as follows. #parent should serve as a background for filling in #relative_div.
#relative_div {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
padding: 2em;
}
#parent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: lightgrey;
}
#source {
position: relative;
cursor: grab;
color: blue;
border: 1px solid black;
}
Now, regardless of whether you use #parent's "position" to push it away, or hide it using "display", "opaicty", or "visibility", #source drag does not stop.

ok, I think my comment was wrong and that you want to remove the space on the page occupied by the origin element (rather than freeing up memory).
To achieve this, add document.body.removeChild(document.getElementById('parent')); to your drop handler. I've made a js fiddle to demonstrate (with the id=spacer div removed and an extra paragraph below it to show the element is removed):
https://jsfiddle.net/dj825rbo/
(revision following comment clarifying that the origin element should disappear as the drag begins)
This is horrible, but works (horrible because you can't see the text while it is being dragged). It relies on a hidden element into which the origin's content is stored while the drag is proceeding. Replacing the 'drop' event listener with a 'mouseup' listeners, allows the content of the temp (hidden element to be transferred to the target where the mouse click was released)
https://jsfiddle.net/dj825rbo/1/

Pseudo element manipulation

I have this DOM
<div class="slotvideo">
<div class="posterimage"></div>
</div>
I can't modify this html code but I need to add an SVG icon. This SVG is used for a function. On click I need to reach the bottom of the page. I create this CSS
.posterimage::before {
content: "";
background-image: mysvg;
}
Now, I can't manipulate pseudo element but I can't find another solution for doing it. How could you fix this problem?

I couldn't find what do you actually want. but about manipulating pseudo-elements, it's not possible. But there is a work-around.
You can define another class name like .active change the element's class to it for controlling pseudo-element.
.posterimage {
/* anything... */
}
.posterimage.active::before {
content: "";
background-image: mysvg;
}
don't forget, psuedo-elements are inline by default, so if you want this background-image to show up, you need to make it display: block and define a set of width and height though.
and it's done. you can use that .active class to have controll of showing ::before or not by JavaScript.

Changing CSS of one element from a list made in javascript

So I have javascript that creates a nav bar - unordered list with several regular lists inside. I wanted to use the last list element in the nav bar to toggle the visibility (opacity) of another element. So I've been using this so far:
li:last-child:hover ~ #test{
opacity: 0 !important;
}
The element I want to toggle is a div marked with the id Test. In structure, my code goes:
<body onload="javascript that makes the menu...">
<div id="menu" //this houses the li elements that are created by the javascript></div>
<div id="test">
But for some reason, my code to alter the #test element doesn't have any effect. However, if I try to change the style of the last list element itself, it works fine.
How can I fix this CSS so that it actually affects the #test element?

You need to use javascript if you want the hover event on an element to affect another element that is not a child of the original.
CSS
.transparent{
opacity: 0 !important;
}
Edit: You need to make sure to either include the jQuery after the HTML, or wrap it in a ready block.
jQuery
$(document).ready(function () {
$('li:last-child').hover(function () {
$('#test').addClass('transparent'); //mouseover
}, function () {
$('#test').removeClass('transparent'); //mouseout
});
});

jQuery and pseudo-elements

I tried to dynamically change the position of an element which is defined in CSS with :after.
Using this:
$(function(){
$('div::after').css({'top':'20px'})
})
But it doesn't work. Are there any ways to change the position?

You can't. Content created by :after or :before is not part of the DOM and therefore cannot be selected or modified.
If you have a look at this example fiddle and inspect the DOM in Firebug or similar you will see that the pseudo-element is not present in the DOM tree.
A potential solution would be to apply a class to the element you want to change, and to style that class appropriately in CSS:
$("div").addClass("newClass");
See this fiddle for an example.

add CSS:
p.special:before {
content: "bar";
position: absolute;
top : 10px;
}
assuming the style sheet where the code above was put is the first one on the page, use this to change it:
document.styleSheets[0].addRule('p.special:before','top: 15px;');