Changing Elements

In JavaScript you can change elements by using the following syntax:

element.attribute="new value"

Here, the srcattribute of an image is changed so when the script is called, it changes the picture from myPicture.jpg to otherPicture.jpg.

//The HTML
<img id="example" src="myPicture.jpg">
//The JavaScript

In order to change an element, you use its argument name for the value you wish to change. For example, let's say we have a button, and we wish to change its value.

<input type="button" id="myButton" value="I'm a button!">

Later on in the page, with JavaScript, we could do the following to change that button's value:

myButton = document.getElementById("myButton"); //searches for and detects the input element from the 'myButton' id
myButton.value = "I'm a changed button"; //changes the value

To change the type of input it is (button to text, for example), use:

myButton.type = "text"; //changes the input type from 'button' to 'text'.

Another way to change or create an attribute is to use a method like element.setAttribute("attribute", "value") or element.createAttribute("attribute", "value"). Use setAttribute to change an attribute that has been defined before.

//The HTML
<div id="div2"></div> //Make a div with an id of div2 (we also could have made it with JavaScript)
//The Javascript
var e = document.getElementById("div2"); //Get the element
e.setAttribute("id", "div3"); //Change id to div3

But use createAttribute, if you want to set a value that hasn't been defined before.

var e = document.createElement('div'); //Make a div element (we also could have made it with HTML)
e.createAttribute("id", "myDiv"); //Set the id to "myDiv"

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.



Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.

Manage research, learning and skills at Create an account using LinkedIn to manage and organize your omni-channel knowledge. is like a shopping cart for information -- helping you to save, discuss and share.

  Contact Us