So fügen Sie eine dynamische URL in eine href ein

Question

Ich möchte eine dynamische URL generieren und sie in ein HTML-Tag einfügen, das dann mithilfe der .innerHTML-Eigenschaft zur Seite hinzugefügt wird.

for (n = 0; n <= allImages.length - 1; n++) { // This cycles through all the images on the page. 
 

 
    function getUrl() { 
 

 
    var srcUrl = document.images[n].src; 
 
    return srcUrl; // Then I get the src URL for each image and return it. 
 

 
    } 
 

 
    var newP = document.createElement('p'); 
 
    newP.innerHTML = document.images[n].naturalWidth + " x " + document.images[n].naturalHeight + " " + '<a href= \'javascript:window.location=getUrl();\'>LINK</a> '; // Run the 'getURL' function so the word LINK directs the viewer to the specific image URL. 
 

 
    imgUrlDiv.appendChild(newP); // Append the code each time to a new <p> 
 
}

Das Problem, das ich in laufende bin ist, dass da die getURL-Funktion als Wert für die ‚href‘ hinzugefügt wird es in Anführungszeichen sein und so wird es in einen String turne (meine Vermutung) und so wird es gerendert wie es ist und nicht die richtige Bild-URL ziehen.

Gibt es eine Möglichkeit, die getURL-Funktion in den Wert der href einzufügen und die Verknüpfung zu jedem Bild auf der Seite zu rendern?

<a href= \'javascript:window.location=getUrl();\'>LINK</a> 

Dies sind einige der Ressourcen Ich habe schon durchgesehen, aber nicht in der Lage gewesen, dieses Problem zu beheben:

• Set iframe url based on dynamic Url
• Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Vielen Dank im fortgeschrittenen !

Answer 1

die Bildquelle als href hinzufügen, wenn die Elemente

for (var n = 0; n < allImages.length; n++) { 
    var img = document.images[n]; 
    var newP = document.createElement('p'); 
    var newA = document.createElement('a'); 
    var newT = document.createTextNode(img.naturalWidth + " x " + img.naturalHeight + " "); 

    newA.href = img.src; 
    newA.textContent = 'LINK'; 

    newP.appendChild(newT); 
    newP.appendChild(newA); 

    imgUrlDiv.appendChild(newP); 
} 

Answer 2

erstellt werden, wenn Sie verwenden:

newP.innerHTML = document.images[n].naturalWidth + " x " + document.images[n].naturalHeight + " " + "<a href= '"+getUrl()+"'>LINK</a> "; 

Sie die Funktion ‚getURL‘ nennen kann, so dass in Ihrem neuen Absatz, den Sie drucken aus der Zeichenfolgendarstellung der Bildbreite und -höhe heraus und das Wort LINK leitet den Betrachter an die spezifische Bild-URL.