Curs Javascript

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
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()
#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday Monday
On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábado
Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.
insertAdjacentHTML - Adaugare continut la pozitia specificata

Last accessed pages

  1. Pronumele indirect 3 (1120)
  2. Curs CSS Online Tutoriale CSS3 (117628)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (279340)
  4. Creare obiecte, proprietati si metode (1962)
  5. Trecutul nedefinit 8 (283)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (133)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (88)
  3. Limba spaniola curs online incepatori si avansati (59)
  4. Teste spaniola - Tests y ejercicios de Español - Gramática (53)
  5. Accentul si Pronuntia (41)