jQuery seleccionando y agregando DOM

When I try to append html using jQuery 1.11.1 in the following way;

var containerObject = $("#idToSomeElement")

var _uniqueIdDiv = containerObject.append("<div id='container'></div>");

var _playPauseDiv = _uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>");
var _playButtonDiv = _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");

"container" div is appended inside "idToSomeElement" as expected, but the following appends which are expected to be inside "container" and "play_pause_div" also appears inside "idToSomeElement" div.

Is such a cascaded usage using jQuery is not supported/buggy or am I doing something wrong?

Obviously I was wrong, and my question became "How to chain appends without re-using selectors?" as @SergTomcat guessed correctly.

Then, to be able to make a tree out of these cascaded functions, it becomes sth like this;

var _uniqueIdDiv = containerObject.append("<div id='container' class='container'></div>").children("#container");

var _playPauseDiv = _uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>").children("#play_pause_div");
var _playButtonDiv = _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");

var _volumeDiv = _uniqueIdDiv.append("<div id='volume_div' class='volume_div'></div>").children("#volume_div");
var _muteDiv = _volumeDiv.append("<div id='mute_div' class='mute_div'></div>");
var _unmuteDiv = _volumeDiv.append("<div id='unmute_div' class='unmute_div'></div>");


var _progressBarDiv = _uniqueIdDiv.append("<div id='progress_bar' class='progress_bar'></div>").children("#progress_bar");
var _progressBackgroundDiv = _progressBarDiv.append("<div id='progress_bar_background' class='progress_bar_background'></div>");
var _progressAmountDiv = _progressBarDiv.append("<div id='progress_amount' class='progress_amount'></div>");
var _progressPointerDiv = _progressBarDiv.append("<div id='progress_pointer class='progress_pointer'></div>");

preguntado el 28 de mayo de 14 a las 13:05

OK, got I was wrong. containerObject.append() does not work as I think it should be... :) -

5 Respuestas

anexar devuelve tu containerObject and not the new element you are creating. This is what makes jQuery functions chainable.

contestado el 28 de mayo de 14 a las 14:05

Exactly, my bad... :) - Ali Naci Erdem

containerObject.append() devuelve referencia en containerObject object. You'll need to do something like this:

var _uniqueIdDiv = containerObject.append("<div id='container'></div>").children();

contestado el 28 de mayo de 14 a las 14:05

probar esto.

You need to get children for append new div, and neet to use $(varname) 

var containerObject = $("#idToSomeElement");

var _uniqueIdDiv = $(containerObject).append("<div id='container'></div>").children();

var _playPauseDiv = $(_uniqueIdDiv).append("<div id='play_pause_div' class='play_pause_div'></div>").children();;
var _playButtonDiv = $(_playPauseDiv).append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = $(_playPauseDiv).append("<div id='pause_div' class='pause_div'></div>");

there are this way too

var containerObject = $("#idToSomeElement");

var _uniqueIdDiv = $("<div id='container'></div>").appendTo(containerObject);

var _playPauseDiv = $("<div id='play_pause_div' class='play_pause_div'></div>").appendTo(_uniqueIdDiv);
var _playButtonDiv = $("<div id='play_div' class='play_div'></div>").appendTo(_playPauseDiv);
var _pauseButtonDiv = $("<div id='pause_div' class='pause_div'></div>").appendTo(_playPauseDiv);

contestado el 28 de mayo de 14 a las 14:05

append() devuelve tu containerObject, not the element you are appending.

Instead you can try

var containerObject = $("#idToSomeElement");
var _uniqueIdDiv = $('<div/>',{id:'container'})
containerObject.append(_uniqueIdDiv);
var _playPauseDiv = _uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>");
var _playButtonDiv = _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _pauseButtonDiv = _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");

contestado el 28 de mayo de 14 a las 14:05

append function does not return the element that you are appending but the container.

http://jsfiddle.net/XySE7/1/

var containerObject = $("#idToSomeElement")

containerObject.append("<div id='container'></div>");
var _uniqueIdDiv =$('#container');

_uniqueIdDiv.append("<div id='play_pause_div' class='play_pause_div'></div>");
var _playPauseDiv = $('#play_pause_div');
 _playPauseDiv.append("<div id='play_div' class='play_div'></div>");
var _playButtonDiv = $('#play_div');
 _playPauseDiv.append("<div id='pause_div' class='pause_div'></div>");
var _pauseButtonDiv = $('#pause_div');

contestado el 28 de mayo de 14 a las 14:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.