Home >Web Front-end >JS Tutorial >Example of how 'text+=''' works in JavaScript

Example of how 'text+=''' works in JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBforward: 2023-09-06 11:21:111354browse

$JavaScript 中“text+=\$

In this tutorial, we will discuss why you need to use the "text = " " " indicator in Javascript.

The instruction here is to assign a piece of code to a variable. The variable here is 'text', ' ' is the string concatenation operator, '=' is the assignment operator, "'" holds a line of code, and '""' contains the string to be added.

Programmers have to write lengthy blocks of code such as appending HTML blocks, appending strings, etc. The variable stores all the values in sequence and displays the entire data in the dom. Escape single quotes within content.

In JavaScript, the = operator is used to add a value to a variable. The value on the right side of the = operator is added to the variable on the left side and the result is stored in the variable.

Here are some examples of how to use text = "" in JavaScript -

let text = "Hello";
text += ""; // text is now "Hello"

let num = 1;
num += 1; // num is now 2

let arr = [1, 2, 3];
arr += [4, 5, 6]; // arr is now [1, 2, 3, 4, 5, 6]

In the first example, the = operator is used to concatenate an empty string to a text variable. This does not change the value of the text variable because the empty string does not have any characters.

In the second example, the = operator is used to increment the num variable by 1. This will increase the value of num by 1.

In the third example, the = operator is used to concatenate two arrays. This combines the elements of both arrays into a single array.

The purpose of the indicator 'text =" " ' in Javascript

Grammar 1

var dataStr = 'content 1';
dataStr += 'content 2'+'content 3';
document.getElementById('id').innerHTML = dataStr;

The above syntax assigns concatenated data to innerHTML.

Example 1

In this program, the variable 'htmlStr' saves the HTML code block and assigns it to this variable to set innerHTML. After the first HTML block, there is a semicolon to end the block. The program uses the concatenation operator and the assignment operator to append the remaining block of code to the end of the code.

<html>
<body>
   <h2> Javascript program that illustrates <i>variable += 'content' </i> </h2>
   <div id="htmlWrap"> </div>
   <script>
      
      //Save HTML code block in a variable
      var htmlStr = '<div class="div1">';
      htmlStr += '<h3>H3 tag</h1>' + '<p>P tag</p>' +
         '<strong>Escaping quotes' to avoid syntax error</strong>' +
         '</div>';
      
      //Set the code block to wrapper dom
      document.getElementById("htmlWrap").innerHTML = htmlStr;
   </script>
</body>
</html>

Grammar 2

var dataStr = 'content';
document.getElementId('id').innerHTML += dataStr;

The above syntax concatenates the data and assigns it to innerHTML itself.

Example 2

Alternatively, you can add multiple lines directly to innerHTML. Check out the code below. Writing innerHTML = 'content' will do the job.

<html>
<body>
   <h2>Javascript program that illustrates <i>innerHTML += 'content'</i></h2>
   <div id="wrap">
      <p> A default text. </p>
   </div>
   <button onclick="moreData();">Add More</button>
   <script>
      function moreData() {
         document.getElementById("wrap").innerHTML +=
            "<h3>This is the text by user.</h3>";
      }
   </script>
</body>
</html>

in conclusion

This tutorial tells us about the need for concatenation and assignment in the case of multiple lines of code in Javascript. This approach ensures that the code is clean and reusable. This way of writing helps when you need the same html content in multiple places on a web page. It also avoids the possibility of syntax formatting errors when you write longer code in a single line.

We've seen two ways to do this. Everyone can choose a method according to their own program needs.

The above is the detailed content of Example of how 'text+=''' works in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program to print all triples forming AP in a sorted arrayNext article：JavaScript program to print all triples forming AP in a sorted array

See more