Javascript element change text

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 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 element change text

  Last updated: Jan 12, 2023
  Reading time · 2 min

  

  # Change the Text of an Element in JavaScript

  Use the textContent property to change the text of an element.

  The textContent property will set the text of the element to the provided string, replacing any of the existing content.

  Here is the HTML for the examples.

  Copied! 
  DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> div id="container">Initial Textdiv> script src="index.js"> script> body> html> 

  And here is the related JavaScript code.

  Copied! 
  const div = document.getElementById('container'); // ✅ Change (replace) the text of the element div.textContent = 'Replacement text'; // ✅ Change (replace) the content with HTML div.innerHTML = `span style="background-color: lime">Replacement HTMLspan>`; // ✅ Append / Prepend text to the element div.insertAdjacentText('beforeend', ' appended text'); // ✅ Append / Prepend HTML to the element div.insertAdjacentHTML( 'beforeend', ` appended HTML`, ); 

  

  We used the textContent property on the div to change its text content.

  The textContent property can also be used to read the text content of an element and its descendants.

  Setting textContent on an element removes all of the element’s children and replaces them with a single text node with the provided string.

  If you need to completely replace the HTML content of the div , use the innerHTML property.

  Copied! 
  const div = document.getElementById('container'); // ✅ Change (replace) the text with HTML div.innerHTML = `span style="background-color: lime">Replacement HTMLspan>`; 

  The innerHTML property gets or sets the HTML contained within the element.

  By setting the property on the element, you effectively replace the previously contained HTML in the div .

  You shouldn’t use user-generated data without escaping it when setting the HTML of an element because it would leave your application vulnerable to XSS attacks.

  If you need to append/prepend text to the existing content of the div element, use the insertAdjacentText method instead.

  Copied! 
  const div = document.getElementById('container'); // ✅ Append / Prepend text to the element div.insertAdjacentText('beforeend', ' appended text'); 

  The insertAdjacentText method takes the following 2 parameters:

  1. position — the position relative to the element where the text should be inserted. Can be one of the following 4:
  • beforebegin — before the element itself.
  • afterbegin — just inside the element, before its first child.
  • beforeend — just inside the element, after its last child.
  • afterend — after the element itself.
  1. data — the string from which to create a new text node to insert at the given position.

  We inserted text just inside the div element, before its last child, but you can change the value of the position parameter depending on your use case.

  If you need to insert HTML into the div , use the insertAdjacentHTML method.

  Copied! 
  const div = document.getElementById('container'); // ✅ Append / Prepend HTML to the element div.insertAdjacentHTML( 'beforeend', ` appended HTML`, ); 

  The first parameter the insertAdjacentHTML method takes is the same as insertAdjacentText — the position at which the HTML should be inserted.

  The second parameter is an HTML string containing the content you want to insert.

  Note that this method shouldn’t be used with user-provided data without it being escaped, as it would leave you open to cross-site scripting attacks.

  I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

  Источник

  JavaScript Change Text

  

  1. Change Text of an Element Using the textContent Property in JavaScript
  2. Change Text of an Element Using the createTextNode() Function in JavaScript

  This tutorial will discuss how to change text of an element using the textContent property and createTextNode() function in JavaScript.

  Change Text of an Element Using the textContent Property in JavaScript

  If you want to replace the old text of an element with some new text, you need to get that element using its id or class name, and then you can replace the old text with the new text using the textContent property. If an id or class name is not specified, you can use the id or class attribute to give the element an id or class name. Ensure the id or class name is unique; otherwise, any element having the same id will also be changed. For example, let’s create a text element using the span tag and change its text using the textContent function in JavaScript. See the code below.

   html> head>  title>title>  head> body>  span id="SpanID"> Old Text span>  script type="text/javascript">  document.getElementById("SpanID").textContent="New Text";  script>  body>  html> 

  The JavaScript code is placed inside the HTML file in the above code, but you can separate them if you want. You can also specify the condition on which the text should be changed like, clicking a button. If you don’t want to replace the text but append some new text with the old text, you can use the below method.

  Change Text of an Element Using the createTextNode() Function in JavaScript

  If you want to append the new text with the old text, you need to get that element using its id or class name and then using the createTextNode() function, you can create a node of the new text and using the appendChild() function you can append the new text with the old text. If an id or class name is not specified, you can use the id or class attribute to give the element an id or class name. Ensure the id or class name is unique; otherwise, any element having the same id will also be changed. For example, let’s create a text element using the span tag and append its text using the createTextNode() function in JavaScript. See the code below.

   html> head>  title>title>  head> body>  span id="SpanID"> Old Text span>  script type="text/javascript">  Myspan = document.getElementById("SpanID");  Mytxt = document.createTextNode("New text");  Myspan.appendChild(Mytxt);  script>  body>  html> 

  As you can see in the output, the new text is concatenated with the old text.

  Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

  Related Article — JavaScript Text

  Источник

  Читайте также:  Css ширина между букв