%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/dom-manipulation.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
DOM-Manipulation
\end{center}

\section*{HTML}
\begin{verbatim}
<div id="Mutter">
    <div id="Kind1"></div>
    <div id="Kind2"></div>
</div>
\end{verbatim}

\section*{JavaScript}
\subsection*{JavaScript-Variablen für HTML-Elemente}
\begin{verbatim}
const divParent = document.querySelector('#Mutter');
const divChild1 = document.querySelector('#Kind1');
const divChild2 = document.querySelector('#Kind2');
\end{verbatim}

\subsection*{Element-Node erstellen}
\begin{verbatim}
const divNeu = document.createElement('div');
\end{verbatim}

\subsection*{Attribut zuweisen}
\begin{verbatim}
divNeu.setAttribute('id', 'Neu');
\end{verbatim}

\subsection*{Text zuweisen}
\begin{verbatim}
divNeu.textContent = 'Hallo';
\end{verbatim}
            
\subsection*{Element in Baum einhängen}
\subsubsection*{a) als letztes Kind}
\begin{verbatim}
divParent.appendChild(divNeu);
\end{verbatim}

\paragraph*{Ergebnis}
\begin{verbatim}
<div id="Mutter">
    <div id="Kind1"></div>
    <div id="Kind2"></div>
    <div id="Neu">Hallo</div>
</div>
\end{verbatim}



\subsubsection*{b) vor bestimmtes Kind}
\begin{verbatim}
divParent.insertBefore(divNeu, divChild2);
\end{verbatim}

\paragraph*{Ergebnis}
\begin{verbatim}
<div id="Mutter">
    <div id="Kind1"></div>
    <div id="Neu">Hallo</div>
    <div id="Kind2"></div>
</div>
\end{verbatim}



\end{document}
