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.

chintuyadavsara · Accepted Answer · 2018-09-09 09:49:07Z

3

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>

answered Sep 9, 2018 at 9:49

chintuyadavsara

1,5891 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

midnightgamer Over a year ago

Thanks ,but these error is showing on console Uncaught TypeError: Cannot read property 'appendChild' of null

chintuyadavsara Over a year ago

but these error is showing on console Uncaught TypeError: Cannot read property 'appendChild' of null Which error are you taking about ? @PankajJaiswal

chintuyadavsara Over a year ago

I have changed the container to id, if you want the container to be class just add the following code document.getElementsByClassName("container")[0].appendChild(el);

midnightgamer Over a year ago

Thanks it worked , but there is error on console can you short it out , please !!

Shubham Yerawar · Accepted Answer · 2018-09-09 09:52:19Z

1

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

answered Sep 9, 2018 at 9:52

Shubham Yerawar

6885 silver badges10 bronze badges

1 Comment

midnightgamer Over a year ago

its working in pen.io but not working on my machine, even i pasted whole code

connexo · Accepted Answer · 2018-09-09 10:05:44Z

0

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

edited Sep 9, 2018 at 10:05

answered Sep 9, 2018 at 9:43

connexo

57.3k15 gold badges112 silver badges150 bronze badges

1 Comment

connexo Over a year ago

Corrected, didn't see you have an id instead of class on the div and due to you naming the variable element I thought that would be an HTMLElement already.

Collectives™ on Stack Overflow

how i can insert elements in the div from javascript?

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related