Jquery用換行符附加文本資料-有解無憂

所以我有這個腳本，它從表單中獲取資料并將其附加到 HTML div 中。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }
    
    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data =
      'Name: '   name.value   ' \r\n '    
      'Age: '   age.value   ' \r\n '    
      'Email: '   email.value   ' \r\n '    
      'Country: '   country.value   ' \r\n '    
      'Message: '   msg.value;


    $('#output').append("<br />"   "<br />");
    $('#output').append(document.createTextNode(data));

  }
</script>

</html>

但問題是當我填寫資料并單擊Write它時，會在一行中輸出所有表單資料。（姓名：x 年齡：4 電子郵件：y 國家：日本留言：z）

我希望它是這樣的，

Name: x 
Age: 4 
Email: y 
Country: Japan 
Message: z

Name: x 
Age: 42
Email: y 
Country: Japan 
Message: zd ....

所以我嘗試使用 javascript 創建一個新行 (\n)，但似乎它不會影響它。

這是我試過的。

          'Name: '   name.value   ' \r\n '   '\n'     
          'Age: '   age.value   ' \r\n '   '\n'       
          'Email: '   email.value   ' \r\n '   '\n'       
          'Country: '   country.value   ' \r\n '   '\n'       
          'Message: '   msg.value;

那么這里有什么問題。任何幫助將非常感激。謝謝。

uj5u.com熱心網友回復：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }
    
    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data = [ 
      `<p>Name: ${name.value}</p>`, 
      `<p>Age: ${age.value}</p>`, 
      `<p>Email: ${email.value}</p>`,  
      `<p>Country: ${country.value}</p>`,  
      `<p>Message: ${msg.value}</p>`];
 
   
    $('#output').append("<br />"   "<br />");

    data.forEach(line => $('#output').append(line));

  }
</script>

</html>

所以在這里我首先將每一行資料放入一個<p>標簽中，然后將其放入一個串列中，我使用的模板文字更簡潔。然后插入要.forEach()在串列上呼叫的資料，然后將每一行（或串列的專案）添加到輸出中。下面是我改的部分。

let data = [ 
  `<p>Name: ${name.value}</p>`, 
  `<p>Age: ${age.value}</p>`, 
  `<p>Email: ${email.value}</p>`,  
  `<p>Country: ${country.value}</p>`,  
  `<p>Message: ${msg.value}</p>`];
 
   
$('#output').append("<br />"   "<br />");
data.forEach(line => $('#output').append(line));

uj5u.com熱心網友回復：

您總是可以將輸出包裝在一個<pre>元素中。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }
    
    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>


    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data = 'Name: '   name.value   ' \r\n'    
      'Age: '   age.value   ' \r\n'    
      'Email: '   email.value   ' \r\n'    
      'Country: '   country.value   ' \r\n'    
      'Message: '   msg.value;


    //$('#output').append("<br />"   "<br />");
    $('#output').append(`<pre>${data}</pre>`);


  }
</script>

</html>

uj5u.com熱心網友回復：

為了在 HTML 中換行，您需要使用<br>代替\r\n。例如像這樣：

let data =
  'Name: '   name.value   '<br>'  
  'Age: '   age.value   '<br>'  
  'Email: '   email.value   '<br>'  
  'Country: '   country.value   '<br>'  
  'Message: '   msg.value;

然后，如果您要附加 HTML，請不要使用createTextNode()函式，因為它會轉義 HTML 物體。所以你可以簡單地使用：

$('#output').append(data);

還有最后一件事。如果您不想每次點擊按鈕時都附加內容，則可以使用html()function 將資料輸入到 DIV 中，而不是append().

$('#output').html(data);

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/384225.html

標籤：javascript 查询

上一篇：使用Alamofire從API回應中獲取空值

下一篇：單擊其回復按鈕后如何獲取textarea內容？