2

I created a div element. Wrapped a textbox in it and after that I updated its border property, but it is not showing up. What's the problem here??

var div =$('<div id="myDiv"></div>').css("border", "1px solid black");
$("#text1").wrap(div);
div.css("border", "1px solid red");
alert(div.css("border")); // it is showing 1px solid red
abhi_awake
  • 186
  • 1
  • 8
  • 1
    Existing answers give you a workaround but without really understanding the problem. The real problem is that [wrap](http://api.jquery.com/wrap/) removes what it wraps from the DOM, a new copy is created and the wrapped node is removed, that;s why querying again fixes your problem – Ruan Mendes Jul 19 '18 at 07:17

1 Answers1

0

Your 'div' is just a variable, not an element. Use the id instead:

$("#myDiv").css("border", "1px solid red");

Here with explanations and the proper way to store an element:

// here you create a object that has no connection to the dom
var div =$('<div id="myDiv"></div>').css("border", "1px solid black");

// here you add a object to the dom that has the same values as your object - but it's a seperate entity
$("#text1").wrap(div);

// here you only update your first object - it will never reflect on it's twin in the dom - 
// so remove this line:
// div.css("border", "1px solid red");

// so instead, save the real element to your variable
div = $("#myDiv");

// now you can work with it and it will update in the dom!
div.css("border", "1px solid red");

// you also need to know that since this is now a real div in your dom, you need to explicitly state which border you want:
// https://stackoverflow.com/questions/3787502/how-to-get-border-width-in-jquery-javascript
alert(div.css("border-left-color")); 


var div =$('<div id="myDiv"></div>').css("border", "1px solid black");
$("#text1").wrap(div);
div = $("#myDiv");
div.css("border", "1px solid red");
alert(div.css("border-left-color")); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text1">Text1</div>
Rence
  • 2,900
  • 2
  • 23
  • 40
  • I had read that whenever you want to use a jquery object more than once its better to create a variable and use it throughout the code. How can i do the same then?? – abhi_awake Jul 19 '18 at 06:52
  • Yes, but right now you are not storing a object, you have a string, that you make an object and then you continue to work with the string instead, so the object will never get updated. I'll make you an example how to fix this. – Rence Jul 19 '18 at 06:54
  • @abhi_awake I added an example how to store the real element after you created it. – Rence Jul 19 '18 at 07:01
  • Okay got it. Plus when i had alerted on this div like this `alert($('
    ').css("border", "1px solid black"));` it show me an object. So it is String object then??     – abhi_awake Jul 19 '18 at 07:05
  • Yes it's an object form your string, but not an object in the dom. It's just an object that exists in theory in your javascript, but has no visible connection to the page. When you wrap the #text1 div, you create a copy in the dom, but you then need to work with the copy while at first you were still working with your first object. You can see this question for a info on how to see if your object is a dom object or not: https://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object – Rence Jul 19 '18 at 07:06
  • Okay thanks got it. This Intellisense of Visual Studio was showing me the methods of jQuery object because of which i got confused, but now it is clear. Means its better not to rely on Intellisense always. :) – abhi_awake Jul 19 '18 at 07:09
  • Nice! If you have any more questions feel free to ask :) – Rence Jul 19 '18 at 07:11