Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Examples of How 'text+=""' in JavaScript Work
In this tutorial, let us discuss why we need the indication 'text += " " ' in Javascript.
The indication here is to assign a block of code to a variable. The variable here is 'text', '+' is the string concatenation operator, '=' is the assignment operator, " ' " holds one line of code, and ' "" ' contains the string to add.
A programmer has to write lengthy code blocks, for example, appending an HTML block, appending a string, etc. The variable stores all values in order and displays the entire data in the dom. Escape single quotes in the 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 a few examples of how text += "" can be used 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 the text variable. This doesn't change the value of the text variable, as an empty string doesn't have any characters.
In the second example, the += operator is used to add 1 to the num variable. This increases the value of num by 1.
In the third example, the += operator is used to concatenate two arrays. This combines the elements of the two arrays into a single array.
The Purpose of the Indication 'text +=" " ' in Javascript
Syntax 1
var dataStr = 'content 1';
dataStr += 'content 2'+'content 3';
document.getElementById('id').innerHTML = dataStr;
The syntax above assigns concatenated data to the innerHTML.
Example 1
In this program, the variable 'htmlStr' saves the HTML code block and assigns this variable to set the innerHTML. After the first HTML block, there is a semicolon to end the block. The program uses the concatenation operator and assignment operator to append the remaining code block at 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>
Syntax 2
var dataStr = 'content';
document.getElementId('id').innerHTML += dataStr;
The syntax above concatenates and assigns the data to the innerHTML itself.
Example 2
Alternatively, you can also add multiple lines in the innerHTML directly. Check out the code below. Writing innerHTML += 'content' does 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>
Conclusion
This tutorial taught us the need for concatenation and assignment in the case of multi-line codes in Javascript. This method ensures a neat and reusable code. When you need the same html content at multiple points on the webpage, this way of writing helps. It also avoids any possibility of syntax formatting errors when you write lengthier code in a single line.
We have seen two ways to do this. Everyone can choose a method according to their program requirements.
74 Views
To Continue Learning Please Login