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 ..

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?

text-align clear float

.some_class {
  width: 30%;
  float: left;
}

Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.

Math.ceil(x) Math.abs(x) Math.floor(x)

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

Indicati functia PHP care returneaza numarul de caractere dintr-un sir.

mb_strlen() count() stristr()

$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29

Clic pe raspunsul potrivit la intrebarea: "When it happened?".

On the 7th of July 1996 It is a quarter to 5. Nice weather.

When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.

Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".

Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.

¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.