CODEWITHSUNDEEP
javascripthtmldata-structures
midnightgamer
midnightgamer

Reputation: 454

how i can insert elements in the div from javascript?

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.

Upvotes: 1

Views: 252

Answers (3)

connexo
connexo

Reputation: 56853

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);
}

Upvotes: 0

Shubham Yerawar
Shubham Yerawar

Reputation: 688

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

Upvotes: 1

chintuyadavsara
chintuyadavsara

Reputation: 1569

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>

Upvotes: 3

Related Questions