Refactoring the way DOM element is created and styled. Now leaving styling to customer

js/privatebin.js

@@ -2995,10 +2995,8 @@ jQuery.PrivateBin = (function($) {
                 attachmentLink.attr('download', fileName);
 
                 const fileSize = Helper.formatBytes(decodedData.length);
-                const fileInfo = document.createElement('span');
-                fileInfo.class = 'alert';
-                fileInfo.textContent = ` (${fileName}, ${fileSize})`;
-                template[0].appendChild(fileInfo);
+                const span = template[0].querySelector('a > span');
+                span.textContent = ` (${fileName}, ${fileSize})`;
             }
 
             // sanitize SVG preview

tpl/bootstrap.php

@@ -691,7 +691,10 @@ endif;
 				</div>
 				<div id="attachmenttemplate" role="alert" class="attachment hidden alert alert-info">
 					<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
-					<a class="alert-link"><?php echo I18n::_('Download attachment'); ?></a>
+					<a class="alert-link">
+						<?php echo I18n::_('Download attachment'); ?>
+						<span></span>
+					</a>
 				</div>
 			</div>
 		</div>

tpl/bootstrap5.php

@@ -549,7 +549,10 @@ endif;
 				</div>
 				<div id="attachmenttemplate" role="alert" class="hidden alert alert-info">
 					<svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#download" /></svg>
-					<a class="alert-link"><?php echo I18n::_('Download attachment'); ?></a>
+					<a class="alert-link">
+						<?php echo I18n::_('Download attachment'); ?>
+						<span></span>
+					</a>
 				</div>
 			</div>
 		</div>