Changing HTML Output, Content, and Attributes

Locked lesson.

Upgrade

About this lesson

How to change HTML output, content, and attributes with JavaScript.

Quick reference

Changing HTML Output, Content, and Attributes

We can manipulate HTML attributes with JavaScript.

When to use

Anytime you want to change the content of an HTML attribute, you'll use this.

Instructions

HTML attributes add a little extra information to an HTML tag.

We can easily manipulate attributes with JavaScript.

Use these just like you use .innerHTML

Example: An image with the id of hiking and a height attribute of 200. To change the height to 400, write:

document.getElementById("hiking").height = 400;

Hints & tips

  • HTML attributes add a little extra info to an HTML tag
  • We can change them by calling .theirName just like we call .innerHTML
  • To change a title, call .title  
  • To change the href, call .href 
Login to download
  • 00:05 Okay, in this video, I wanna talk about changing HTML output content and
  • 00:09 attributes.
  • 00:10 So we already know how to change basic HTML with that document.write
  • 00:14 thing that we've been using so far.
  • 00:15 Now every time we use that or basically changing the HTML of the page,
  • 00:19 we're adding some content to it.
  • 00:20 And we've already seen how we can change the different elements by using
  • 00:24 the .innerHTML, we can also change the value of an HTML attribute.
  • 00:29 So if you aren't familiar with HTML attributes, they're part of HTML tags and
  • 00:33 they give a little bit of extra information.
  • 00:35 So for instance, you might have a title tag on something.
  • 00:38 So let's come up to our p and let's add a title
  • 00:45 = and we can put, I don't know, Woohoo.
  • 00:49 Right, so if we save this, come back here and hit reload.
  • 00:52 Actually we need some text here, This is some text.
  • 00:56 Save this, come back here and hit reload.
  • 00:58 We have This is some text, if we hover our mouse over here, boom, we get this
  • 01:02 little title pop up thing, this is Woohoo, so the title is in HTML attribute.
  • 01:07 So another example is an image.
  • 01:11 If we wanna do an image in HTML, if we wanted to put an image of me
  • 01:16 hiking we might put hike.png, if we had that image, right?
  • 01:20 So we can designate the height and width of this image by going height
  • 01:25 = I don't know, 100, width = 400, I don't know.
  • 01:31 But the height and
  • 01:32 width, these are attributes, so it's giving a little bit of extra information.
  • 01:36 We don't have to put these on here.
  • 01:37 We don't have to put this title thing on here.
  • 01:39 But if we wanna add a little bit of information, that's what an attribute is.
  • 01:42 And for that matter, this src is an attribute too.
  • 01:45 One more example, a link.
  • 01:46 If you wanna create a link, mypage.html My Link.
  • 01:53 This href is an attribute.
  • 01:56 So there's lots of different HTML attributes, and you can see
  • 01:59 how being able to change these different things is important, very useful, right?
  • 02:03 So, like if we had this image, and we wanted to change the height and
  • 02:07 width of it on the fly with JavaScript, we would wanna change these attributes and
  • 02:11 we can do that.
  • 02:11 So very cool, and I'm just gonna go ahead and delete these.
  • 02:14 And now, how exactly do we do this?
  • 02:16 So it's pretty easy.
  • 02:17 Let's go ahead and play with our p tag here.
  • 02:20 And I'm just gonna give this an id equal to myExample.
  • 02:25 And this is some text we can go ahead and leave that.
  • 02:27 And now if we come back to our script area, and let's do the getElementById, and
  • 02:32 let's call myExample, so we´re calling this id, and
  • 02:35 we´re saying the title .title, the .title attribute.
  • 02:39 Right now it says, Woohoo, we're gonna change it to this as the new title.
  • 02:43 So if we go ahead and save this, come back here and hit reload,
  • 02:46 and if we hover our mouse over there, this is my NEW title.
  • 02:49 Remember it used to say wahoo, or woohoo, or whatever.
  • 02:53 Just that simple,
  • 02:54 we can change these things by slapping in the attribute right here.
  • 02:58 Like I said changing HTML attributes comes in handy a lot of different ways.
  • 03:01 We can change links on the fly, we can change images on the fly,
  • 03:04 we can change just about any attribute you can think of and it's just that easy.
  • 03:08 And in the next video, we'll talk about changing CSS.

Lesson notes are only available for subscribers.

Gift this course