Develop Reference

I want to add html tag without ending tag

I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');

Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");

I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.

$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>

JQuery find text nodes with not selector on nested elements work only with .contents() and filter()

Please help me understand why this is happening.
(UPDATE) TL;DR:
nested elements' text will be included when using find with not(NESTED_ELEMENT) selector but will be excluded when using find with not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE).
I want to get the text from a page but to exclude some elements.
For the simplicity, I have excluded <p> element only (and descendants) but when I use the text(), I'm also getting the text in the excluded element.
When I filter the results with contents() to include only text nodes, only then the not selector is "working" by not returning the text from the excluded elements. Please see image below with the code used:
Why isn't it working without using contents()?
Thanks.
For your convenience:
The URL that I tested on is this one.
The code that gives me the excluded element's text:
$('body').find(':not(p, p *)').text()
The code that gives me the desired text (excluded element's text not present):
$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()
And here's the HTML part from the URL. As you can see, there's a <p> element there and As described, I want to get the text from this HTML but to exclude some elements (p was selected for simplicity, there will be lots more rules in production).
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right
ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>

Try using .clone() , .remove() , .text()
var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();
console.log(filtered.text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>

How to identify this element in protractor?

When I view some customer information, I see the customer information displayed at the bottom. I believe it comes from JSON call.
How to identify this element? I tried className but not working. Thanks for your help. And tried this css as well. .override-info hide-mobile ng-scope. I need to assert the name matches to John Grish:
<div class="override-info hide-mobile ng-scope" ng-if="overrideCustInfo">
<p class="override-info-title">You are viewing</p>
<p class="override-info-dtl ng-binding">John Grish</p>
<p class="override-info-dtl ng-binding">1177 Montogomery st</p>
<p class="override-info-dtl ng-binding">San Francisco, CA</p>
</div>

You can rely on class names:
expect(element
.all(by.css("div.override-info p.override-info-dtl"))
.first().getText()
).toEqual("John Grish");

Why does delegate not work in "p" tag?

When delegate with p tag, it does not work http://jsfiddle.net/peswe/wbVMV/4/
HTML:
<p id='test'>
<div>box 1
<div>box in box1</div>
</div>
</p>
​
JavaScript:
$('p#test').delegate('div','click',function(){
alert('test');
})
Changing p#test to span#test or body, it works http://jsfiddle.net/peswe/wbVMV/3/
HTML:
<span id='test'>
<div>box 1
<div>box in box1</div>
</div>
</span>
​
JavaScript:
$('span#test').delegate('div','click',function(){
alert('test');
})
Please tell me something about it.Thank you very much!

This is how browser (HTML parser) works, since <div> is a Flow element and <p> is a Phrasing element, in most case an phrasing element cannot contain any flow element, this is called misnested tags, HTML parser would fix these issues magically with some certain steps:
When reading <p>, it generates a <p> element
When reading <div>, since <div> cannot reside in a <p> element, HTML parser closes the last <p> element, then open an <div> element
When reading </div>, closes the <div> element
When reading </p>, since previous <p> element is closed, parser recogonizes it as a <p> element missing a start tag, so parser automatically inserts an <p> start tag here to create a complete <p> element
Thus, the final DOM construct is:
<p id="test"></p> <!-- auto closed -->
<div>
box1
<div>
box in box1
</div>
</div>
<p></p> <!-- auto generated -->
It's obvious that the <div> and <p> is at the same level, not forming a containing relation, so delegate fails here.

The browser is correcting your invalid HTML and moving the div outside of the p. They become siblings, hence event delegation does not work. Just inspect the elements and see for yourself:
First case:
<body>
<p id="test"></p>
<div>box 1
<div>box in box1</div>
</div>
<p></p>
</body>
Second case:
<body>
<span id="test">
<div>box 1
<div>box in box1</div>
</div>
</span>
</body>

The p tag can only contain inline elements,
While the <span> tag (as being one that handles pretty well the crossbrowser identity of an inline-block element) accepts pretty well (visually cause in the code it get messed) the div tag, although either incorrect.
It won't validate either in strict 4.01 doctype nor in HTML5.
The appropriate way would be to wrap it in a block-level element : a div.

(Javascript) Inserting elements dynamically in a specific position

Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?

Create your own insertAfter function

you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );