how i can insert elements in the div from javascript?

Question

This is my html here i am taking elements from user and trying to update in js.

This my script file

  // Initializing the Stack Class function Stack() { this.dataStore = []; this.top = 0; this.push = push; // Inserting the element in Stack this.pop = pop; //Removing the element in Stack this.peek = peek; this.clear = clear; this.length = length; } // Adding an element in Stack function push(element) { this.dataStore[this.top++] = element; } function peek() { return this.dataStore[this.top - 1]; } // Removing an element from the given stack function pop() { return this.dataStore[-this.top]; } function clear() { this.top = 0; } function length() { return this.top; } var s = new Stack(); function pushToStack(el){ s.push(el); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- <div> <input type="text" id="stackName"> <button onclick="MakeStack()">Make a stack</button> </div> --> <div> <input type="text" id="elemet"> <button onclick="pushToStack(document.getElementById('elemet').value)"> Push an elemet </button> </div> <div class="container"></div> <script src="script.js"></script> </body> </html>

What i want is that when i click on push button the data from text filed should save in array as stack and data should show in container as my element of Stack. Thanks for help.

Answer 1

append the input to the Container , here is the code. Hope this is what you are looking for.

 // Initializing the Stack Class function Stack() { this.dataStore = []; this.top = 0; this.push = push; // Inserting the element in Stack this.pop = pop; //Removing the element in Stack this.peek = peek; this.clear = clear; this.length = length; } // Adding an element in Stack function push(element) { this.dataStore[this.top++] = element; } function peek() { return this.dataStore[this.top - 1]; } // Removing an element from the given stack function pop() { return this.dataStore[-this.top]; } function clear() { this.top = 0; } function length() { return this.top; } var s = new Stack(); function pushContainer(el){ //console.log(el); var x = document.getElementById("container"); x.appendChild(el); } function pushToStack(el){ // var newElement = document.createElement("p"); var Textnode = document.createTextNode(el); newElement.appendChild(Textnode); pushContainer(newElement); s.push(el); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div> <input type="text" id="elemet"> <button onclick="pushToStack(document.getElementById('elemet').value)">Push an elemet</button> </div> <div id="container"> </div> </body> </html>

Answer 2

You can modify your push function as :

function pushToStack(el){
    s.push(el);
  var para = document.createElement("p");
  var node = document.createTextNode(el);
   para.appendChild(node);
   document.querySelector('.container').appendChild(para);
}

for working code, please refer: this pen

Answer 3

Modify your push function then:

function push(element) {
    this.dataStore[this.top++] = element;
    var div = document.createElement('div');
    div.textContent = element;
    document.getElementById('container').appendChild(div);
}

how i can insert elements in the div from javascript?

Question

3 answers

solution1
3 ACCPTED 2018-09-09 09:49:07

solution2
1 2018-09-09 09:52:19

solution3
0 2018-09-09 09:43:45

how i can insert elements in the div from javascript?

Question

3 answers

solution1 3 ACCPTED 2018-09-09 09:49:07

solution2 1 2018-09-09 09:52:19

solution3 0 2018-09-09 09:43:45

solution1
3 ACCPTED 2018-09-09 09:49:07

solution2
1 2018-09-09 09:52:19

solution3
0 2018-09-09 09:43:45