We Keep Coding

modify / move an existing html tag in the DOM (javascript)

I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often

give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))

How To Display A Unique Element Based On A Click Event In Angular 6

So I have two files. An app.component.ts file and an app.component.html file.
Below is an image example of what I want to achieve in my User Interface.
If you look at the photo, you'll see an action icon by the right displaying a nav box element.
I tried achieving something similar in my angular application and this is what I get any time I click on the action Icon:
All the nav boxes display on the UI when I click on the icon. This is because the nav element is inside a *ngFor loop.
Here is my code in the app.component.html file:
<div class="row" *ngFor="let picture of pictures">
<div class="cell">
<p>{{picture.name}}</p>
<p class="med-text meta space-text">{{picture.ticketid}}</p>
</div>
<div class="cell"><p class="meta">{{picture.email}}</p></div>
<div class="cell-photo"><p class="meta">{{picture.ticket_type}}</p></div>
<div class="cell-large">
<div class="toggle on">
<div class="toggle"></div>
</div>
</div>
<div class="small">
<div>
<div class="toggle-on" (click)="toggleActionNav()">
<div class="action"></div
</div>
<!--- nav-Element Starts ---->
<nav class="dropdown-list w-dropdown-list w--open" *ngIf ="actionNav">
<div>View Pictures</div>
<div >Edit Pictures</div>
</nav>
<!--- nav-Element Ends ---->
</div>
</div>
</div>
And here is the code on my app.component.ts file:
actionNav: boolean;
toggleActionNav() {
this.actionNav = !this.actionNav;
}
My question goes thus. How do I get the nav elements to display uniquely and not all displaying together at the same time, just like it is in the first photo?
All responses will be deeply appreciated. Thanks

You can, for example, add a showActionNav property to your picture object. Then you can do (click)="picture.showActionNav = !picture.showActionNav" to toggle it and *ngIf ="picture.showActionNav" to display it.

simplest answer would be just set flag,
for example, actionNavOpen in your object:
(click)="picture.actionNavOpen = !picture.actionNavOpen"
in navs ngIf do: *ngIf ="picture.actionNavOpen"
of course if you're heavily typed this will give you some errors.
so few tips what to do next:
toggling of this flag (actionNavOpen) should be via method
in this method you can also set all others flag in pictures to false
just remember you don't need to pre-set this flag to falsy - it's already falsy while you get this data from rest api
to remove type errors you should extend returning model (interface) from rest api with your model which has this particular flag (actionNavOpen)

if you could show the before and after image will help to understand the problem. Here the problem statement given , when clicking the icons overlap or design itself is overlapping ?

actionNav variable shouldn't be in component's scope. It should be part of picture object which you are using in the ngFor.
And, pass the picture object along with index to the toggleActionNav method to change the actionNav value.
Below is what you need.
<div class="row" *ngFor="let (picture, index) of pictures">
<div class="cell">
<p>{{picture.name}}</p>
<p class="med-text meta space-text">{{picture.ticketid}}</p>
</div>
<div class="cell">
<p class="meta">{{picture.email}}</p>
</div>
<div class="cell-photo">
<p class="meta">{{picture.ticket_type}}</p>
</div>
<div class="cell-large">
<div class="toggle on">
<div class="toggle"></div>
</div>
</div>
<div class="small">
<div>
<div class="toggle-on" (click)="toggleActionNav(picture, index)">
<div class="action"></div>
</div>
<!--- nav-Element Starts ---->
<nav class="dropdown-list w-dropdown-list w--open" *ngIf="picture.actionNav">
<div>View Pictures</div>
<div>Edit Pictures</div>
</nav>
<!--- nav-Element Ends ---->
</div>
</div>
</div>
And the toggle method needs to be like:
toggleActionNav(picture, index) {
//disable all the actionNavs to false
this.pictures.map(pictureObj => pictureObj.actionNav = false)
this.pictures[index] = true
}

Using jQuery to select unrelated elements

I am new to jQuery and writing a script to change the color of a certain element based on whether or not the element it lies upon has been selected. My first problem is I am not able to edit the html structure and the way the structure is formed is causing some problems for me. Basically this is the structure:
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
The team names have been absolutely positioned to lie over the blocks, so the content of the blocks looks like "Team Name Home 0.65".
When a block is selected its class becomes:
class="block 01 sel"
I am able to change the color of the "Home" and "0.65" text easily with CSS but changing the team name (Team 01/Team 02) is proving to be a lot more complicated and I am wondering if its possible to do this with or javascript or jQuery ?
Its also worth noting that the team names will never be the same so doing a selection based on the content is not possible

To change a specific team, you will need to give them unique identifiers, for example:
<div class="teamNames">
<span id="item1">Team 01</span>
<span id="item2">Team 02</span>
</div>
No you change select the specific span elements using jQuery. For example you want to change Team 01:
$("#item1").text("New Team Name");
Hopefully this is what you are trying to do.

if I get the question right, you can change the names with jquery like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".teamNames span:first").html("hello world");
});
</script>

Do you need to find team element by selected block?
If yes you can use $.index function for getting index of selected team:
var currentBlock = $('.sel');
var indexOfCurrentBlock = $('.block').index(currentBlock);
if (indexOfCurrentBlock != -1) {
var currentTeamName = $('.teamNames span').eq(indexOfCurrentBlock);
currentTeamName.text('aaaa');
}
http://jsfiddle.net/JRFv6/

Is this looking for class="block 01 sel" if it is selected
$(".block").click(function(){
$(".block").removeClass("sel");
$(this).addClass("sel");
});
DEMO

the way to change in elements not having id without to change html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
<script>
$(".teamNames span:eq(0)").html("New-Team-Name<br>");
$(".teamNames span:eq(1)").text("---- New Team Name");
</script>
</body>
</html>

When div is clicked - slidetoggle other div

I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/

undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!

$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});

class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.

.slideToggle() is being triggered many times?

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?

If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle

code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)