源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储字符串

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52675410

示例效果：

JS代码如下：

// Create variables to hold the name and note text.
var username;
var message;

// Assign values to these variables.
username = 'PDH';
message = '学好JavaScript, HTML, CSS等前端技术！';

// Get the element with an id of name.
var elName = document.getElementById('name');
// Replace the content of this element.
elName.textContent = username;

// Get the element with an id of note.
var elNote = document.getElementById('note');
// Replace the content of this element.
elNote.textContent = message;

/* 
NOTE: textContent does not work in IE8 or earlier
You can use innerHTML, but note the security issues on p228-231
elName.innerHTML = username;
elNote.innerHTML = message;
*/

HTML代码如下：

<!DOCTYPE html>
<html>
  <head>
  <meta content="text/html; charset=utf-8"/>
    <title>JavaScript & jQuery - Chapter 2: Basic JavaScript Instructions - String Variable</title>
    <link rel="stylesheet" href="css/c02.css" />
  </head>
  <body>
    <h1>Elderflower</h1>
    <div id="content">
      <div id="title">Howdy <span id="name">friend</span>!</div>
      <div id="note">Take a look around...</div>
    </div>
    <script src="js/string-variable.js"></script>
  </body>
</html>

CSS代码：（参考：