insertAdjacentHTML - Adaugare continut la pozitia specificata

Metoda insertAdjacentHTML() se aplica la obiecte HTML preluate in JavaScript si poate fi utilizata pentru adaugarea de continut HTML in pagina la o pozitie specificata, in raport cu elementul la care e aplicata.
Aceasta nu afecteaza celelate elemente din pagina.

- Sintaxa:

element.insertAdjacentHTML(position, content);

- 'content' e un sir cu text si tag-uri HTML.
- 'position' e pozitia relativa la element, si e un sir ce poatea avea una din aceste valori:

'beforebegin' - inaintea elementului.
'afterend' - dupa element.
'afterbegin' - la inceput in interior.
'beforeend' - in interior, la sfarsit.

Exemple cu insertAdjacentHTML()

Cu beforebegin

<div id="dv1"> #dv1, https://marplo.net/</div><br>
La clic pe buton adauga cu insertAdjacentHTML() continut HTML inainte de Div-ul #dv1.<br>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em> Website: </em>';
 dv1.insertAdjacentHTML('beforebegin', cnt);
});
</script>

Cu afterend

<div id="dv1"> #dv1, https://gamv.eu/</div><br>
La clic pe buton adauga cu insertAdjacentHTML() continut HTML dupa Div-ul #dv1.<br>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em> Website: </em>';
 dv1.insertAdjacentHTML('afterend', cnt);
});
</script>

Cu afterbegin

<div id="dv1"> #dv1, https://marplo.net/</div><br>
La clic pe buton adauga un continut HTML in interiorul Div-ului #dv1, la inceput.<br>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em> Website: </em>';
 dv1.insertAdjacentHTML('afterbegin', cnt);
});
</script>

Cu beforeend

<div id="dv1"> #dv1, https://gamv.eu/</div><br>
La clic pe buton adauga un continut HTML in interiorul Div-ului #dv1, la sfarsit.<br>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em> Games </em>';
 dv1.insertAdjacentHTML('beforeend', cnt);
});
</script>

insertAdjacentText()

O metoda similara este: element.insertAdjacentText(position, string).
Aceasta adauga sirul de la 'string' in pozitia de la 'position', relativ la 'element'.
- 'position' are aceleasi valori ca si insertAdjacentHTML(); diferenta e faptul ca insertAdjacentText() adauga sirul asa cum e, tag-urile HTML nu sunt adaugate in DOM, ci afisate ca text.

Exemplu:

<div id="dv1"> #dv1, https://gamv.eu/</div><br>
La clic pe buton adauga un sir text in interiorul Div-ului #dv1, la sfarsit.<br>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em class="cls"> Games </em>';
 dv1.insertAdjacentText('beforeend', cnt);
});
</script>

<<-Drag si Drop cu .. -- Cum se poate utiliza ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a include fisier extern CSS in pagina web?

<link href="/templ/style.css" rel="stylesheet" type="text/css" />

Ce proprietate CSS seteaza marimea textului?

font-weight text-decoration font-size

h2 {
  font-size: 1em;
}

Indicati proprietate JavaScript care poate sa adauge cod HTML intr-un element.

text value innerHTML

document.getElementById("someID").innerHTML = "Continut HTML";

Clic pe functia care returneaza numarul de caractere dintr-un sir in PHP.

count() strlen() stristr()

$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22

Care este forma de feminin a adjectivului "white" (alb)?

white whitea whites

(In limba engleza adjectivele au aceeasi forma pt. ambele genuri)
The snow is white. - Zapada e alba.

Care este forma de feminin a adjectivului "blanco" (alb)?

blanc blance blanca

La nieve es blanca.
- Zapada e alba.