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:

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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
insertAdjacentHTML - Adaugare continut la pozitia specificata

Last accessed pages

  1. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (19291)
  2. Gramatica limbii engleze - Prezentare Generala (66707)
  3. Cursuri Limba Rusa (1428)
  4. Like si As - Exercitii engleza incepatori (1313)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (34566)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2796)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1398)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (1129)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (828)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (747)