JavaScript Function

JavaScript HTML DOM — Changing HTML

The HTML DOM allows JavaScript to change the content of HTML elements.

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

This example changes the content of a

element:

Example

• The HTML document above contains a

  element with id=»p1″

• We use the HTML DOM to get the element with id=»p1″
• A JavaScript changes the content ( innerHTML ) of that element to «New text!»

This example changes the content of an element:

Example

• The HTML document above contains an element with id=»id01″
• We use the HTML DOM to get the element with id=»id01″
• A JavaScript changes the content ( innerHTML ) of that element to «New Heading»

Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:

This example changes the value of the src attribute of an element:

Example

• The HTML document above contains an element with id=»myImage»
• We use the HTML DOM to get the element with id=»myImage»
• A JavaScript changes the src attribute of that element from «smiley.gif» to «landscape.jpg»

Dynamic HTML content

JavaScript can create dynamic HTML content:

Example

document.write()

In JavaScript, document.write() can be used to write directly to the HTML output stream:

Example

Never use document.write() after the document is loaded. It will overwrite the document.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

JavaScript — how to change text on HTML pages

The easiest way to change the text content of HTML pages is to manipulate the textContent property of the specific element using JavaScript.

First, you need to select the element you want to change the text. It may be a , a , a

or any other tag. All HTML elements have the textContent property from which you can set the text for that element.

For example, suppose you have the following HTML page:

Here’s how to change the text inside the element into “Greetings from Mark”:

• getElementById() — fetch a single element with matching id attribute
• getElementsByClassName() — fetch the elements with matching class attribute
• getElementsByName() — fetch the elements with matching name attribute
• getElementsByTagName() — fetch the elements with matching tag name like «li» for
• , «body» for

The most recommended approach is to use getElementById() method because it’s the most specific of these methods.

Out of the four methods, only getElementById() will retrieve a single element as an object. The other methods will fetch the elements as an array even when the page has only one matching element.

Since the tag above already has an id attribute, you can use that to get the element as follows:

 If your element doesn’t have an id attribute, then you can add it first. Please make sure that no two elements or more have the same id attribute value. JavaScript will return only the first element it found if you do.

Next, you just need to replace the textContent property as in the code below:

And just like that, you’ll have the text inside the tag changed.

Keep in mind that the textContent property is used only to change the text inside the element. If you add an HTML tag inside the text, it will be displayed on the page literally.

For example, suppose you want to add an italic styled text with tag. You may try to add it like this:

"What would happen is the text "Greetings from Mark" will be displayed on the HTML page.

To properly add HTML tags to your new text, you need to use the innerHTML property instead of the textContent property. Here’s an example:

"Now the tag content will be styled properly.

The innerHTML property allows you to set the HTML content of the element, not just plain text as in textContent property. Feel free to use the method that meets your need 😉

You can use the same methods to change other HTML elements like a , a , or a

tag.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

Javascript Change HTML Element Text Tutorial

In this Javascipt tutorial we learn how to return and change text, or HTML content, within an element.

We also discuss the differences between the innerText, innerHTML and textContent properties and which one we should use.

How to change an element’s text content

Javascript provides us with the textContent property that we can use to change the text inside an element.

 When we change the value of the property, it will completely overwrite the previous value.

 This property will only return the text inside an element. Any HTML inside the element will be stripped before the text is returned.

    If we run the example above, we can see the formatting that’s present in the top paragraph is no longer there in the bottom paragraph.

This means we cannot use textContent to replace text with something that includes html.

 If we run the example above, it will print the HTML code instead of creating a link.

How to change an element’s innerHTML

Javascript also provides us with the innerHTML property that we can use to change the text inside an element.

 Unlike the textContent property, innerHTML will return everything exactly as it is inside the element, including HTML.

    This time the second paragraph has all its formatting and the link is still available because innerHTML brings any HTML along.

This means that we can include HTML elements when replacing text.

 In the example above, the link is generated instead of displaying the code.

The innerText property

The innerText property works the same as the textContent property but will not return any hidden elements.

Both innerText and textContent will display content inside or tags.

  The only difference is that innerText will keep the formatting, whereas textContent will not.

Which text property should you use

It depends on your situation. If you simply want to change the text in an element, any of these properties will work.

• If you want to return or change the HTML inside an element, use innerHTML.
• If you want to return or change just the text inside an element, use innerText.
• If you want to return or change just the text inside hidden elements, use textContent.

Summary: Points to remember

• We can use the innerHTML, innerText and textContent properties to return or change text inside an element.
  • The textContent property will return all text, including anything inside a hidden element.
  • The innerText property will return all text, excluding anything inside a hidden element.
  • The innerHTML property will return both text and any other HTML content inside the element.

  Источник

  JavaScript Functions – Change HTML Text and CSS

  In this tutorial, we are going to change our CSS and HTML text using JavaScript functions dynamically. And also learn about arrow functions and a self-invoking anonymous function.

  Changing HTML Text using JavaScript

  Changing the text of web page or a particular part of a web page by invoking click event using JavaScript.

      function func1()  
  Text
   Click  

  In the above code, I have created a function named as func1() to target div element which has id as “divElement”. But function will call only when click event is happening.
  At the starting web page look like this:
  Output :

  After click event text will change to Change Text and output of web page look like as shown below.
  Output:

  Changing CSS

  Changing style sheet dynamically of elements or web page by invoking click event using JavaScript.

      function func1()  
  Text
   Paragraph Click  

  In the above code, using a function named as func1() I have change text color from black to blue by clicking the button. This event is done using function created under script tag. This func1() is executed only when the button is clicked by the user.
  When we load the page then web page will look like this :
  Output

  After click event occurs function func1() will execute and color of text change to blue. Since we have targeted only div tag using its id divElement, therefore, color will change to Text only.
  Output:

  Other Functions in JavaScript

  Self Invoking Anonymous Function: Anonymous function are the function which has no name.Functions which are executed at load time and have no name then this type of function known as a self-invoking anonymous function. Here in below code, I have created a function which will execute at load time and set variable x as HELLO .

  Arrow Function: Arrow function are also an anonymous function. Arrow function is used to deal with ambiguity generated by this keyword in JavaScript. It is an alternative of regular expression in JavaScript. Arrow Function cannot use as constructors.
  In below code, I have created a function which return multiplication of x and y and this function is stored in constant variable x.

  Источник

  Читайте также:  Узнать размер блока css