CODEWITHSUNDEEP
jquery
sonu sasankan
sonu sasankan

Reputation: 79

How to store newly added element in a variable using jquery?

When I console newNode it still print parent, why?

function appendNewStage() {
  var parent = $('.ci-journey-interactions-canvas_row');
  var newStage = `<ul class="ci-journey-interactions-canvas__journey-list 
                    stage">
                  <li>
                    <span class="ci-journey-interactions-box__droppable-
                     element ci-droppable"></span>
                  </li>
                </ul>`;
  var newNode = $(parent).append(newStage);
  console.log(newNode.html());
}
appendNewStage()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="ci-journey-interactions-canvas_row"></div>

Upvotes: 1

Views: 77

Answers (4)

Andrei Todorut
Andrei Todorut

Reputation: 4526

The last element of .ci-journey-interactions-canvas_row is the appended element . Maybe you can use the newNode variable globally so you can use this in other functions.

var newNode = null;

function appendNewStage() {
  var parent = $('.ci-journey-interactions-canvas_row');
  var newStage = `<ul class="ci-journey-interactions-canvas__journey-list 
                    stage">
                  <li>
                    <span class="ci-journey-interactions-box__droppable-
                     element ci-droppable"></span>
                  </li>
                </ul>`;
  $(parent).append(newStage);
  newNode = $(parent).find('ul:last-child').parent().html();
}

Upvotes: 0

ild flue
ild flue

Reputation: 1361

The original code works well. Click the button in the snippet to add a new stage

function appendNewStage() {
  var parent = $('.ci-journey-interactions-canvas_row');
  var newStage = `<ul class="ci-journey-interactions-canvas__journey-list 
                    stage">
                  <li>
                    <span class="ci-journey-interactions-box__droppable-
                     element ci-droppable"></span>
                  </li>
                </ul>`;
  var newNode = $(parent).append(newStage);
  console.log(newNode.html());
}
appendNewStage()  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button onclick="appendNewStage()">add a new stage </button>

<div class="ci-journey-interactions-canvas_row"></div>

Upvotes: 0

imanshu15
imanshu15

Reputation: 764

Try this,

var newNode = $(newStage).appendTo(".ci-journey-interactions-canvas_row");

Upvotes: 1

sainanky
sainanky

Reputation: 507

dont need to make a parent a object use it directly 

function appendNewStage(){
var parent = $('.ci-journey-interactions-canvas_row');
var newStage = `<ul class="ci-journey-interactions-canvas__journey-list 
                stage">
              <li>
                <span class="ci-journey-interactions-box__droppable-
                 element ci-droppable"></span>
              </li>
            </ul>`;
var newNode = parent.append(newStage);
 console.log(newNode);
}

Upvotes: 0

Related Questions