在JavaScript中text+=””的工作实例

在本教程中，让我们讨论一下为什么我们需要在Javascript中使用 “text += ” “这个指示。

这里的指示是将一个代码块分配给一个变量。这里的变量是’text’，’+’是字符串连接运算符，’=’是赋值运算符，”‘”容纳一行代码，'””包含要添加的字符串。

程序员必须写冗长的代码块，例如，附加一个HTML块，附加一个字符串，等等。该变量按顺序存储所有的值，并在dom中显示整个数据。在内容中逃避单引号。

在JavaScript中，+=运算符被用来向一个变量添加数值。在+=运算符右边的值被添加到左边的变量中，结果被存储在变量中。

下面是几个例子，说明如何在JavaScript中使用text += “” –

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]

在第一个例子中，+=运算符被用来将一个空字符串连接到文本变量。这并不改变文本变量的值，因为空字符串没有任何字符。

在第二个例子中，+=运算符被用来向num变量添加1。这使num的值增加了1。

在第三个例子中，+=运算符被用来连接两个数组。这将两个数组的元素合并成一个数组。

Javascript中 “text +=” “的指示的目的

语法 1

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

上面的语法将串联的数据分配给innerHTML。

示例 1

在这个程序中，变量’htmlStr’保存了HTML代码块，并指定这个变量来设置innerHTML。在第一个HTML代码块之后，有一个分号来结束该代码块。该程序使用连接运算符和赋值运算符将剩余的代码块附加在代码的最后。

<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>

语法 2

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

上面的语法将数据串联起来，并将其分配给innerHTML本身。

示例 2

另外，你也可以直接在innerHTML中添加多行。请看下面的代码。写入innerHTML += ‘content’就能完成工作。

<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>