Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
    <title>Chat Test</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col">
            <div id="AVAInteractArea" class="col mb-4 bg-dark justify-content-center"
                 style="max-height: 25rem; overflow-y: auto">
                <div class="d-flex justify-content-start mb-4">
                    <h5>
                        <span class="badge badge-primary">AVA</span>
                        Hi, how are you?
                    </h5>
                </div>
                <div class="d-flex justify-content-end mb-4">
                    <h5>
                        Hi, I am good about you?
                        <span class="badge badge-secondary">You</span>
                    </h5>
                </div>
                <script>
                    function addDiv(parent_div) {
                        var div = document.createElement('div');
                        var parent = document.getElementById(parent_div);

                        div.innerHTML = '<p>TEST</p>';
                        parent.appendChild(div);
                    }

                    var button = document.getElementById('AVAInteractTypeSubmit');
                    if (button) {
                        button.addEventListener('click', function () {
                            // change dynamically your new div
                            addDiv('AVAInteractArea');
                        });
                    }
                </script>
            </div>
            <form class="col-lg-6 offset-lg-3 mb-5">
                <div class="row form-group justify-content-center">
                    <input id="AVAInteractType" type="text"
                           placeholder="Ask AVA about law"
                           class="form-control-lg border-white"
                           style="outline: none"
                           autofocus="autofocus">
                    <button id="AVAInteractTypeSubmit" class="btn-lg btn-primary" style="outline: none">Ask</button>
                </div>
                <button id="AVAInteractSpeak" class="btn-lg btn-primary" style="outline: none">Or speak to AVA</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

我试图做到这一点，以便当我用id="AVAInteractTypeSubmit"单击按钮时，它会向div的父div添加一个id="AVAInteractArea"。但是，每当我运行此代码时，似乎没有这样的div被添加到父div中。我不知道为什么它不起作用，请帮助我。我不想使用jQuery，我只想修复上面script标签中的Javascript代码。

修改谢谢@brk解决我的问题。但是现在我想做些不同的事情，我想将所有内容添加到专用于在父div内添加div的函数中，因此我将script标记中的所有代码替换为

function addUserAVAInteraction() {
    var div = document.createElement('div');
    var parent = document.getElementById('AVAInteractArea');
    div.innerHTML = '<div class="d-flex justify-content-end mb-4"><h5>Hi, I am good about you?<span class="badge badge-secondary">You</span></h5></div>';
    parent.appendChild(div);
}

然后我向按钮onclick="addUserAVAInteraction()"添加了一个属性。每当我用id="AVAInteractTypeSubmit"单击按钮时，它将div添加到父div上，但仅持续一秒钟，然后立即消失。我需要像@brk的解决方案一样工作，请帮忙。

Answer 1

默认button类型为Submit。因此，在单击按钮时它令人耳目一新。添加event.preventDefault

function addDiv(parent_div) {
  var div = document.createElement('div');
  var parent = document.getElementById(parent_div);

  div.innerHTML = '<p>TEST</p>';
  parent.appendChild(div);
}

var button = document.getElementById('AVAInteractTypeSubmit');
if (button) {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    // change dynamically your new div
    addDiv('AVAInteractArea');
  });
}

<div class="container">
  <div class="row">
    <div class="col">
      <div id="AVAInteractArea" class="col mb-4 bg-dark justify-content-center" style="max-height: 25rem; overflow-y: auto">
        <div class="d-flex justify-content-start mb-4">
          <h5>
            <span class="badge badge-primary">AVA</span> Hi, how are you?
          </h5>
        </div>
        <div class="d-flex justify-content-end mb-4">
          <h5>
            Hi, I am good about you?
            <span class="badge badge-secondary">You</span>
          </h5>
        </div>

      </div>
      <form class="col-lg-6 offset-lg-3 mb-5">
        <div class="row form-group justify-content-center">
          <input id="AVAInteractType" type="text" placeholder="Ask AVA about law" class="form-control-lg border-white" style="outline: none" autofocus="autofocus">
          <button id="AVAInteractTypeSubmit" class="btn-lg btn-primary" style="outline: none">Ask</button>
        </div>
        <button id="AVAInteractSpeak" class="btn-lg btn-primary" style="outline: none">Or speak to AVA</button>
      </form>
    </div>
  </div>
</div>

单击按钮

1 个答案: