How to add attributes dynamically in html tag using javascript function?

This article will explain how to add attributes dynamically in html page using javascript.Example: meta tag, javascript files, css files, etc

You might also like

A Comprehensive Guide to JavaScript Variable Declarations

January 25, 2023

Unlocking the Power of JavaScript Comments

January 20, 2023

Find the javascript code for adding the html tags and attributes dynamically to html pages using javascript

Javascript Function

Below javascript function will add attribute to DOM Element using javascript “element.setattribute(attribute value)” function.

function addTag(name, attributes) {
    var el = document.createElement(name),
        attrName;

    for (attrName in attributes) {
      el.setAttribute(attrName, attributes[attrName]);
    }

    document.write(el.outerHTML);
};

Call the Javascript Function

// Add CSS file
addTag('link', {rel: 'stylesheet', href: 'css/bootstrap.min.css', type: 'text/css'});

// Add Javascript file
addTag('script', {src: 'lib/angular.min.js' });
addTag('script', {src: 'lib/angular-route.min.js' });
addTag('script', {src: 'lib/canvasjs.min.js' });
addTag('script', {src: 'lib/underscore-min.js' });
addTag('script', {src: 'js/main.js' });
addTag('script', {src: 'js/controller/controller.js' });

Output screenshot

Demo