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

Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?

action method value

<form action="script.php" method="post"> ... </form>

Ce proprietate CSS adauga umbra la chenar?

background-image box-shadow border-radius

#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}

Clic pe functia care elimina primul element dintr-un array?

pop() push() shift()

var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2

Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.

function() filetype() extension_loaded()

if(extension_loaded("PDO") === true) echo "PDO este valabil."

Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".

has have Can

 Can I listen to music?
- Pot asculta muzica?

Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"

están gustan gusta

Me gustan las frutas dulces.
- Imi plac fructele dulci.