在div中输入输入文本，但不交换旧文本

Question

我有作业，这个任务一直让我有问题，我仍然是JavaScript的noob，如果我问愚蠢的问题，我很抱歉...... 我有输入字段，当我提交它们时，它们应该出现在它们下面的div中，它对我来说很好，之后我需要提交另一个具有不同值的时间，但不要更改旧的，新的应该在旧的上面如果你明白我的意思那就是那个部分我就是无法开始工作，说实话我不知道我应该怎么做......我知道它会使用jQuery更容易，但条件不是使用它 这是我的代码（非常感谢每一个帮助！）：

function validate() {
  var title = document.getElementById('news-title').value;
  var errortitle = '';
  var error = 0;
  title = title.trim();
  if (title.length === 0) {
    errortitle += 'Title is required. <br>';
    error++;
  }
  if (title.length < 3 || title.length > 50) {
    errortitle += 'Title must be between 3 and 50 characters.';
    error++;
  }

  if (error === 0) {
    document.getElementById('error-title').innerText = '';
    document.getElementById('news-title').style.borderColor = "black";


  } else {
    document.getElementById('error-title').innerHTML = errortitle;
    document.getElementById('news-title').style.borderColor = "red";
  }
  //title end
  //news start
  var news = document.getElementById('news-text').value;
  var errornews = '';
  var greska = 0;


  news = news.trim();
  if (news.length === 0) {
    errornews += 'News text is required. <br>';
    greska++;
  }
  if (news.length < 10 || title.length > 250) {
    errornews += 'News text must be between 10 and 250 characters.';
    greska++;
  }
  if (greska === 0) {
    document.getElementById('error-text').innerText = '';
    document.getElementById('news-text').style.borderColor = "black";


  } else {
    document.getElementById('error-text').innerHTML = errornews;
    document.getElementById('news-text').style.borderColor = "red";
  }
  //news end
  //link start
  var url = document.getElementById('news-link').value;
  var errorlink = '';
  var greskalink = 0;
  url = url.trim();



  if (url.length === 0) {
    errorlink += 'News link is required. <br>';
    greskalink++;
  }
  if (url.length < 10 || url.length > 250) {
    errorlink += 'News link must have at least  10 characters. <br>';
    greskalink++;
  }
  if (url.search("http") > 0) {
    errorlink += 'News link must start with https://';
    greskalink++;
  }
  if (greskalink === 0) {
    document.getElementById('error-link').innerText = '';
    document.getElementById('news-link').style.borderColor = "black";

  } else {
    document.getElementById('error-link').innerHTML = errorlink;
    document.getElementById('news-link').style.borderColor = "red";
  }
  //link ends
  //author starts       
  var author = document.getElementById('news-author').value;
  var errorauthor = '';
  var greskaAuthor = 0;
  author = author.trim();



  if (author.length === 0) {
    greskaAuthor;
  } else if (author.length < 3 || author.length > 20) {
    errorauthor += 'Author (if entered) must have between 3 and 20 characters.';
    greskaAuthor++;
  }

  if (greskaAuthor === 0) {
    document.getElementById('error-author').innerText = '';
    document.getElementById('news-author').style.borderColor = "black";

  } else {
    document.getElementById('error-author').innerHTML = errorauthor;
    document.getElementById('news-author').style.borderColor = "red";
  }
  //author ends
  var email = document.getElementById('email').value;
  var errormail = '';
  var greskamail = 0;
  email = email.trim();

  if (email.length === 0) {
    errormail += 'Email is required. \n';
    greskamail++;
  }

  if (email.length < 5) {
    errormail += 'Email must have at least 5 characters.\n';
    greskamail++;
  }

  if (email.search('@') < 2) {
    errormail += "Please enter valid email.";
    greskamail++;
  }

  if (greskamail === 0) {
    document.getElementById('error-email').innerText = '';
    document.getElementById('email').style.borderColor = "black";

  } else {
    document.getElementById('error-email').innerText = errormail;
    document.getElementById('email').style.borderColor = "red";
  }


  if (greskamail > 0 || greskaAuthor > 0 || greskalink > 0 || greska > 0 || error > 0) {
    document.getElementById('content').innerHTML = '';
  } else {
    document.getElementById('email-autora').innerHTML = email;
    document.getElementById('opis-vesti').innerHTML = news;
    document.getElementById('autor').innerHTML = author;
    document.getElementById('link-do-vesti').href = url;
    document.getElementById('link-do-vesti').innerHTML = url;
    document.getElementById('naslov').innerHTML = title;
  }
}

<div class="container clearfix">

  <label>News title</label><br>
  <input type="text" name="news-title" value="" id="news-title">
  <p id="error-title" style='color: red;'></p>

  <label>News text</label><br>
  <textarea name="news-text" rows="8" cols="80" id="news-text"></textarea>
  <p id="error-text" style='color: red;'></p>

  <label>News link</label><br>
  <input type="text" name="news-link" value="" id="news-link">
  <p id="error-link" style='color: red;'></p>



  <label>Author</label><br>
  <input type="text" name="news-author" value="" id="news-author">
  <p id="error-author" style='color: red;'></p>

  <label>Author Email</label><br>
  <input type="text" name="email" value="" id="email">
  <p id="error-email" style='color: red;'></p>



  <button id="enter" onclick="validate()">Display</button>


  <div id="content">
    <h1 id="naslov"></h1>
    <p id="opis-vesti"></p>
    <a href="" id="link-do-vesti"></a>
    <p id='email-autora'></p>
    <h4 id='autor'></h4>
    <hr>
  </div>
</div>

Answer 1

这里的问题是，即使您使用新值复制并粘贴content内的DOM元素，您也会有多个具有相同ID的DOM元素，这是不允许的（如果您{{1}怎么会知道哪一个？）。

一种解决方案是删除getElementById中的DOM元素，然后在content函数内创建它们作为字符串，然后将validate设置为字符串，加上content.innerHTML已经是。

content.innerHTML

这种方式不安全，因为在输入中输入的HTML将由DOM呈现。解决此问题的一种简单方法是使用character reference var content = document.getElementById('content'); var newContent = ''; newContent += '<h1>' + title + '</h1>'; newContent += '<p>' + news + '</p>'; newContent += '<a href="' + url + '">' + url + '</a>'; newContent += '<p>' + email + '</p>'; newContent += '<h4>' + author + '</h4>'; newContent += '<hr>'; content.innerHTML = newContent + content.innerHTML; 替换字符串中的所有&，<，>和"，{分别为{1}}，&和<。由于您需要为每个输入值执行此操作，因此最好使用一个函数 （功能来自this回答）

&rt;

然后你可以"，其他人也一样。

＆＃13;

＆＃13;

function htmlEntities(str) {
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

＆＃13;

htmlEntities(title)

＆＃13;

＆＃13;

＆＃13;