如何使用 javascript 在 html 页面中显示元素？

Question

I have a set of hardcoded html elements.

                    <!-- 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>

I'm trying to generate this set of elements with a button click and add the text typed in the input box into the <p> tag. The code for the button and the text input box is as follows.

<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>

The function for the button click is,

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 = "";
}

When i click the button nothing is happening? Am i doing something wrong?

Answer 1

I tweaked the code to make the desired 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 = '';
}

You were not using appendChild. That was the only mistake.

Answer 2

I see that you are creating the element div3 which you appends the p that you are talking about, but I don't see you appending them to the DOM.

So you need to do

document.body.appendChild(div3)

or

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