JQuery warp function is not working properly

Reported by:	dgofman@gmail.com	Owned by:
Priority:	undecided	Milestone:	None
Component:	unfiled	Version:	1.10.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

Please review my code I create two scripts: native JavaScript and using JQuery wrap function. I would like to report the wrap function is not working properly at least before and after API are not working:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="native" style="background-color:green"></div>
	<br/><br/>
	<div id="jquery" style="background-color:red"></div>
</body>
<script>

var container1 = document.getElementById("native");

//create element
var div = document.createElement("div");
div.innerHTML = "HELLO WORLD";
container1.appendChild(div);

//append
var p = document.createElement("p");
p.innerHTML = "LAST";
container1.appendChild(p);

//wrap
var span = document.createElement("span");
span.style.color = "blue";
div.parentNode.insertBefore(span, div);
span.appendChild(div);

//before
var p = document.createElement("p");
p.innerHTML = "BEFORE";
span.parentNode.insertBefore(p, span);

//after
var p = document.createElement("p");
p.innerHTML = "AFTER";
span.parentNode.insertBefore(p, span.nextSibling);

</script>

<script>

var container2 = $("#jquery");

//create element
var div = $("<div></div>");
div.html("HELLO WORLD");
container2.append(div);

//append
var p = $("<p></p>");
p.html("LAST");
container2.append(p);

//wrap
var span = $("<span></span>");
span.css("color",  "blue");
div.wrap(span);

//span = div;

//before
var p = $("<p></p>");
p.html("BEFORE");
span.before(p);

//after
var p = $("<p></p>");
p.html("AFTER");
span.after(p);

</script>

</html>

Attachments (0)

Change History (4)

Changed July 14, 2013 10:32PM UTC by anonymous comment:1

http://jsfiddle.net/pDreG/

Changed July 16, 2013 12:08AM UTC by timmywil comment:2

resolution:	→ notabug
status:	new → closed

We have to clone the element with which the collection is wrapped, which means a new element will be created based on the element passed to wrap. This is to provide a mechanism to conveniently wrap more than one element at a time with the same html. It also avoids unexpected behavior when wrapping with existing elements. Below is one way to get the new span element:

http://jsfiddle.net/timmywil/pDreG/2/

Changed July 16, 2013 05:12PM UTC by anonymous comment:3

HI timmywil,

Thanks for your time, but for me your workaround looks very strange

I have a div component (input/select etc)

var div = $("<div></div>");

now I am creating a spam wrapper and apply for the div: <span><div></div></span>

var span = $("<span></span>");

div.wrap(span);

Why should I ask div where is my span if I already have a span variable????

FIX

Get the correct span

span = div.parent();

//before

var p = $("<p></p>");

p.html("BEFORE");

span.before(p);

Changed July 16, 2013 06:05PM UTC by dmethvin comment:4

This isn't a bug report, it's a request for jQuery programming help. Wrapping a block element in an inline element doesn't make much sense anyway. Ask for help on a forum.

Side navigation