w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Script JavaScript

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

W3TWEAKS by W3TWEAKS
November 22, 2019
in JavaScript

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

Understanding JavaScript Variable Declarations

A Comprehensive Guide to JavaScript Variable Declarations

January 25, 2023
Unlocking the Power of JavaScript Comments

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

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

Demo

Tags: codedownloadexamplesmediasnippet
Previous Post

AngularJS with CanvasJS Charts

Next Post

List all top best Javascript Syntax Highlighters framework collections

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Understanding JavaScript Variable Declarations

A Comprehensive Guide to JavaScript Variable Declarations

by W3TWEAKS
January 25, 2023

If you want to become a better JavaScript programmer, mastering JavaScript variable declarations is a great first step. This article...

Unlocking the Power of JavaScript Comments

Unlocking the Power of JavaScript Comments

by W3TWEAKS
January 20, 2023

Comments allow developers to document their code and make it easier to understand for other developers and maintainers. Comments can...

JavaScript Types and the typeof Operator

A Comprehensive Guide to JavaScript Types and the typeof Operator

by W3TWEAKS
January 20, 2023

JavaScript is a very versatile language, and with it come several different JavaScript types of data that can be used...

Running JavaScript Programs: Tips and Techniques for Beginners

Running JavaScript Programs: Tips and Techniques for Beginners

by W3TWEAKS
January 20, 2023

Running JavaScript programs can often be tricky for beginners, as the language itself may be unfamiliar. However, there are a...

Next Post
List all top best Javascript Syntax Highlighters framework collections

List all top best Javascript Syntax Highlighters framework collections

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools