如何使用 javascript 在 html 頁面中顯示元素？

Question

我有一組硬編碼的 html 元素。

                    <!-- Reciever Message-->
                <div class="media w-50 ml-auto mb-3">
                    <div class="media-body">
                        <div class="bg-primary rounded py-2 px-3 mb-2"> 
                            <p class="text-small mb-0 text-white">Test chat</p>
                        </div>
                    </div>
                </div>

我正在嘗試通過單擊按鈕生成這組元素，並將在輸入框中鍵入的文本添加到<p>標記中。 按鈕和文本輸入框的代碼如下。

<form action="#" class="bg-light">
                <div class="input-group">
                    <input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control rounded-0 border-0 py-4" id="message">
                    <div class="input-group-append">
                        <button id="button-addon2" type="submit" class="btn btn-link" onclick="addText()"> <i class="fa fa-paper-plane"></i></button>
                    </div>
                </div>
            </form>

用於按鈕單擊的 function 是，

function addText() {
    var p = document.createElement("p");
    p.className ="text-small mb-0 text-white"
    var inputValue = document.getElementById("message").value;
    var text = document.createTextNode(inputValue);
    p.appendChild(text);

    if (inputValue === '') {
        alert("You must write something!");
    } else {
        var div = document.createElement("div");
        div.className = "media w-50 ml-auto mb-3";
        var div2 = document.createElement("div");
        div2.className = "media-body";
        var div3 = document.createElement("div");
        div3.className = "bg-primary rounded py-2 px-3 mb-2";
        div3.id = "receive-text";
        div3.appendChild(p);
    }
    document.getElementById("message").value = "";
}

當我點擊按鈕時什么都沒有發生？ 難道我做錯了什么？

Answer 1

我調整了代碼以制作所需的 output

function addText() {
  var p = document.createElement('p');
  p.className = 'text-small mb-0 text-white';
  var inputValue = document.getElementById('message').value;
  var text = document.createTextNode(inputValue);
  p.appendChild(text);

  if (inputValue === '') {
    alert('You must write something!');
  } else {
    var div = document.createElement('div');
    div.className = 'media w-50 ml-auto mb-3';
    var div2 = document.createElement('div');
    div2.className = 'media-body';
    div.appendChild(div2);
    var div3 = document.createElement('div');
    div3.className = 'bg-primary rounded py-2 px-3 mb-2';
    div3.id = 'receive-text';
    div2.appendChild(div3);
    div3.appendChild(p);
    document.body.appendChild(div);
  }
  document.getElementById('message').value = '';
}

您沒有使用 appendChild。 那是唯一的錯誤。

Answer 2

我看到您正在創建元素div3 ，您將其附加到您正在談論的p中，但我沒有看到您將它們附加到 DOM 中。

所以你需要做

document.body.appendChild(div3)

或者

document.getElementById("#idOfDiv3Parentelement").appendChild(div3)