Question

我正在制作一个测验网站，当我点击按钮向您显示错误的正确答案时，我使用了document.getElementById，但它总是删除由其写的其余答案。同样的方法。

这是我的javascript代码片段

if (mistakes > 0) {
  if (document.getElementById('wrongAnswer1').checked === true || 
      document.getElementById('wrongAnswer2').checked === true) {
        document.getElementById('mistakesDiv').innerHTML =
          document.getElementById('mistakesDiv').innerHTML + 
          "<br>" + 
          "question 1's correct answer is" + 
          document.getElementById('correctAnswer1').value;
   }
}

Answer 1

您可以将现有内容动态添加的内容与现有内容分开，因为在更新innerHTML时，它将更新所选元素内的所有内容。因此，一个解决方案是使用父div（您将选择用于添加新子节点的div）并在每个正确答案内添加子div（动态添加div）。如果你想给动态div一些id，你可以使用一个计数器或问题id，这个新的子div已被添加。要将新子项添加到“父”，可以使用“appendChild”方法。它将是这样的：

var str = "#foo#";
var regex = /(?<=#)(.*)(?=#)/ig;
var result = str.replace(regex,"<a href='https://www.google.com/search?q=$1'>$1</a>");
alert(result);

我为你的场景创造了一个小提琴请看看： https://jsfiddle.net/jbw7ku15/

Answer 2

将您的html div设计为：

<div id="contentId">
 ......
 ......
</div>

你的javascript就像：

var div = document.getElementById('contentId');
div.innerHTML += 'your content';

Answer 3

为了在不更改实际 html 的情况下进行附加，例如，您希望让用户能够将字段添加到他正在填写的表单中。您可以使用 insertAdjacentHTML

var html = "<br>" + "question 1's correct answer is" + document.getElementById('correctAnswer1').value;
document.getElementById('mistakesDiv').insertAdjacentHTML("afterend",html);

如何添加到div的内容而不使用javascript删除它的原始内容

3 个答案: