Înlocuiți HTML cu innerHTML – Javascript (Programare, Javascript, Html, Innerhtml)

user9755712 a intrebat.
a intrebat.

Am nevoie să scriu o funcționalitate JS care citește un întreg document HTML și înlocuiește un text cu un alt text.

HTML –

<ul>
  <li>
    <a id="aId" href="https://www.w3schools.com" target="_blank"> Link1 </a>
  </li>
  <li>
    <a id="bId" href="https://www.w3schools.com" target="_blank"> Link2 </a>
  </li>
  <li>
    <a href="https://www.w3schools.com" target="_blank"> Link3 </a>
  </li>
</ul>

Cod Javascript –

var strMessage1 = document.getElementById("aId") ;
var first = 'target="_blank"';
var second = 'target="_blank" rel="noopener noreferrer" onClick="alert('Hello World!')"';

strMessage1.innerHTML = strMessage1.innerHTML.replace(first, second) ; 

Javascript ar trebui să fie capabil să parcurgă întregul HTML și să înlocuiască primul var cu al doilea var (definit în script), acolo unde se găsește. Acesta este un exemplu doar pentru primul id – „aId”.

Întrebare – Cum ar putea scriptul să acopere și să înlocuiască conținutul în

  • id-ul bId?
  • Link3, care nu are niciun id?

la fel de bine.

DEMO – http://jsfiddle.net/nikhil_gupta/rzy3ajhx/.

Notă – Nu se utilizează jQuery.

Comentarii

  • Căutați querySelector și stai departe de w3schools IMO. ex. const anchor3 = document.querySelector('li:nth-child(3) > a') –  > Por CertainPerformance.
  • document.getElementById("aId").innerHTML vă va da " Link1 " iar codul de înlocuire nu va funcționa. Ar trebui să folosiți outerHTML în schimb. –  > Por 31piy.
  • Javascript ar trebui să fie capabil să ruleze prin toate element de intrare din HTML Dar exemplul tău nu are nici un input elemente. Acesta arată că lucrați pe a elemente. –  > Por Scott Marcus.
  • @31piy outerHTML nu va face ceea ce credeți că face. Acesta va înlocui elementele a în întregime cu 'target="_blank" rel="noopener noreferrer" onClick="alert('Hello World!')"' –  > Por Scott Marcus.
  • @ScottMarcus — OP vrea în mod clar să înlocuiască apariția lui 'target="_blank"' cu 'target="_blank" rel="noopener noreferrer" onClick="alert('Hello World!')"'. Eu cred că outerHTML funcționează perfect pentru aceasta. –  > Por 31piy.
5 răspunsuri
Scott Marcus

.innerHTML modifică conținutul unui element (ceea ce se află între tag-urile de deschidere și închidere). Codul dvs. încearcă să modifice valoarea unui atribut al unui element. Acestea nu sunt același lucru.

De asemenea, este important să înțelegeți implicațiile utilizării innerHTML (și outerHTML).

  • Ambele fac ca DOM-ul să fie reconstruit, apoi repictat și redepus, ceea ce este foarte costisitor din punct de vedere al resurselor.
  • De asemenea, utilizarea lor va elimina orice gestionari de evenimente configurați anterior.
  • Acestea deschid găuri de securitate în aplicația dumneavoastră.
  • De obicei, sunt însoțite de o mulțime de catenă de șiruri de caractere și ghilimele imbricate.

Pentru a modifica valoarea unui atribut al unui element, este suficient să accesați atributul HTML pe care doriți să-l modificați ca proprietate a obiectului JavaScript sau să utilizați funcția element.setAttribute(attributeName, value) metoda DOM.

Întrebare – Cum ar putea scriptul să acopere și să înlocuiască conținutul din

  • bId id?
  • Link3, care nu are id?

de asemenea.

Atunci când doriți să modificați mai multe elemente, trebuie să le introduceți într-o colecție sau într-o matrice și apoi să le puteți trece în buclă. Introducerea lor într-un grup se poate face în mai multe moduri diferite care nu au legătură cu id(după numele etichetei, după clasa CSS, după poziția în document, după valorile atributelor etc.). În exemplul dvs., dacă am dori să modificăm toate legăturile care se află în interiorul bullets care au target=_blank ca fiind href am putea să le direcționăm în funcție de poziție și de valoarea atributului cu ajutorul unui selector CSS și a clasei .querySelectorAll() metodă. Veți observa că în exemplul meu de mai jos, am eliminat elementul id atributele complet din HTML, iar codul funcționează în continuare.

În cele din urmă, nu ar trebui să folosiți atribute de eveniment HTML inline (onclick, etc.) pentru a configura funcțiile de apelare a gestionării evenimentelor. Aceasta este o tehnică veche de peste 25 de ani, care este copiată și lipită de fiecare dezvoltator web nou, fără a avea o înțelegere a de ce nu ar trebui să fie folosită.. În schimb, folosiți un cod modern, bazat pe standarde și pe .addEventListener() DOM API.

Comentarii

  • Acesta este atributul rel: rel="rel="noopener noreferrer"". Informațiile din postare sunt bune, doar că mi se pare ironic faptul că ați postat o soluție stricată de mai multe ori, în timp ce îi dați unui alt utilizator un răspuns răutăcios la o soluție funcțională. –  > Por Clint.
Bui Dinh Ngoc

Cred că te referi la outerHTML

http://jsfiddle.net/rzy3ajhx/1/

strMessage1.outerHTML = strMessage1.outerHTML.replace(first, second);

Do Trung Duc

Din câte am înțeles, încerci să schimbi atributele din tag-ul html.Nu poți folosi .innerHTML sau .replace pentru a face acest lucru, acesta modifică doar conținutul din interiorul tag-ului html.Pentru a rezolva întrebarea dvs., puteți folosi .getAttribute(), .setAttribute(), sau .createAttribute() Ceva similar cu codul dvs. și funcționează:

var strMessage1 = document.getElementById("aId");
strMessage1.setAttribute("rel", "noopener noreferrer");
strMessage1.setAttribute("onClick", "alert('Hello World!')")

rosethorn999
  • Q1:bId id?

Răspuns1: Nu știu de ce fel de element aveți nevoie. Deci, eu prind toate etichetele. Există o modalitate simplă de a obține elemente: document.querySelectorAll("query")

  • Q2:Link3, care nu are id?

Răspuns2: ca și Q1. Elementul care nu are id este în regulă.

  • Q3:etichetă editată nu funcționează.

Răspuns 3: .innerHTML este pentru <a>*here*</a>trebuie să editați atributul, deci trebuie să apelați .outerHTML

Referințe:

31piy

Puteți utiliza outerHTML pentru a înlocui apariția conținutului din first cu conținutul lui second. Puteți selecta al doilea a folosind aceeași metodă document.getElementById apel.

Pentru al treilea, puteți utiliza document.querySelectorAll și să obțineți ultimul element din colecția returnată.

Practici de codare mai bune:

  • Utilizați setAttribute() pentru a seta atributele individuale ale unui element în loc să faceți o înlocuire. Acest lucru va preveni apariția unor erori nedorite.
  • În loc de a selecta elemente individuale utilizând document.getElementById și document.querySelectorAll, puteți utiliza un document.querySelectorAll și să faceți o buclă pe colecție pentru a înlocui conținutul.